I am currently utilizing Plotly in Javascript to generate some interactive graphs.
My goal is to create 2 pie charts that display the distribution of a sale based on A) units and B) value.
While I am able to generate the plots successfully, I have noticed that as the share of each category changes between the two charts, the colors also change, making it harder to compare them intuitively.
Is there a way for me to maintain consistency in the colors associated with the X values across both charts? Any suggestions or insights would be greatly appreciated.
grafico_categoria = document.getElementById('grafico_categoria');
categorias = {{ arr_productos_categoria|safe }}
yvalue = []
labels = []
$.each(categorias, function(index, value) {
yvalue.push(value['uds']);
labels.push(value['productos__categoria_producto__categoria_producto']);
});
value_1 = {values: yvalue,
labels: labels,
type: 'pie',
hoverinfo: 'none',
textinfo: "label+percent",
textposition: "outside",
automargin: true
};
data = [value_1,];
var layout = {
height: 300,
width: 550,
margin: {
l: 10,
r: 10,
b: 10,
t: 10,
pad: 4
},
showlegend: false,
paper_bgcolor: 'white',
plot_bgcolor: 'white',
};
Plotly.newPlot(grafico_categoria, data, layout);