Black Lives Matter. Please consider donating to Black Girls Code today.

Override some template values

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?

Bildschirmfoto 2020-09-28 um 14.56.39

Bildschirmfoto 2020-09-28 um 14.56.51

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
      };
  
    }
  }
});