Dear community,
I’m trying to develop a consistent design with templates throughout my dashboard. So far I’ve been able to create a template with Plotly.makeTemplate() and create a new figure which reuses the layout from the first figure.
The problem is I’m using a subplot to plot a angular gauge indicator next to a scatter and I can only change the data part for the scatter plot, but not for the angular gauge. As far as I know you have to specify the angular gauge indicator almost completely as data, hence I can’t put it into the layoutpart of the template.
Any idea how to make template work for this combination?
Edit: I just found out that I also can not override values in the layout part. Do I use it correctly or is this feature just for something else?
window.dash_clientside = Object.assign({}, window.dash_clientside, {
clientside: {
gTrendsFunc: function(data) {
/* Angular Gauge Indicator DATA */
var trace1 = {
domain: { x: [0, 0.4], y: [0.1, 0.8] },
type: 'indicator',
mode: 'number+gauge+delta',
number:{'valueformat': '%'},
delta: { reference: 0.12 },
value: 0.2,
title: { text: '' },
gauge: {
axis: { visible: false, range: [0, 1]},
bar: {color: 'rgba(255,255,255,0.4)'},
bgcolor: 'white',
borderwidth: 0,
steps: [
{ range: [0, 0.10], color: '#4d4d4d'},
{ range: [0.10, 0.25], color: '#999999'},
{ range: [0.25, 0.50], color: '#e0e0e0'},
{ range : [0.50, 0.75], color: '#ef8a62'},
{ range: [0.75, 1], color: '#b2182b'}],
threshold: {
line: {color: 'white', width: 1},
thickness: 0.75,
value: 0.20
}
}
};
/* Scatter DATA */
var trace2 = {
type: 'scatter',
x: [20, 30, 40],
y: [0, 60, 0],
xaxis: 'x',
yaxis: 'y'
};
/* Put it together */
var data = [trace1, trace2];
/* Define layout, but mostly for scatter */
var layout = {
grid: {rows: 1, columns: 2, pattern: 'independent'},
plot_bgcolor: 'rgb(255, 255, 255)',
showlegend: false,
margin: { l: 0, r: 0, t: 0, b: 0 },
height:65,
yaxis:{
domain: [0.12, 1],
showticklabels: false,
showgrid: false,
zeroline: false,
tickprefix: '',
hoverformat: '%',
range: [0, 100]
},
xaxis:{
domain: [0.38, 1],
showticklabels: false,
showgrid: false,
zeroline: false,
range: []
}
}
/* Derive template from above data */
var template = Plotly.makeTemplate({
'data': data,
'layout': layout
});
/* Create new Layout with template */
var layoutUsingTemplate = {
template: template
};
/* Create some new data for gauge indicator */
var trace12 = {
number:{'valueformat': '.2s'},
delta: { reference: 0.22 },
value: 0.8,
gauge: {
axis: { visible: false, range: [0, 1]},
bar: {color: 'rgba(255,255,255,0.4)'},
bgcolor: 'white',
borderwidth: 0,
steps: [
{ range: [0, 0.10], color: '#4d4d4d'},
{ range: [0.10, 0.25], color: '#999999'},
{ range: [0.25, 0.50], color: '#e0e0e0'},
{ range : [0.50, 0.75], color: '#ef8a62'},
{ range: [0.75, 1], color: '#b2182b'}],
threshold: {
line: {color: 'white', width: 1},
thickness: 0.75,
value: 0.20
}
}
};
/* Create some new data for scatter */
var trace22 = {
y: [100, 0, 100],
};
data2 = [trace12,trace22]
/* return figure with new layout and new data */
return {
'data': data2,
'layout': layoutUsingTemplate
};
}
}
});