Hi all,
I have a problem with a pie chart. I would like to have it responsive, so I set the attribute “responsive” to true.
However, when I resize, some of the slices of the pie chart sometimes do not resize, leading to a “broken” chart.
For what I have seen, there is a problem with the “d” attribute of the path of the slices, that is not updated as the windows size change. In addition, when this problem occurs, I get the subsequent error:
Uncaught TypeError: Cannot read properties of undefined (reading ‘color’)
at b (plotly-2.4.2.min.js?ver=5.8.2:58)
at SVGGElement. (plotly-2.4.2.min.js?ver=5.8.2:58)
at plotly-2.4.2.min.js?ver=5.8.2:7
at ut (plotly-2.4.2.min.js?ver=5.8.2:7)
at Array.Y.each (plotly-2.4.2.min.js?ver=5.8.2:7)
at SVGGElement. (plotly-2.4.2.min.js?ver=5.8.2:58)
at plotly-2.4.2.min.js?ver=5.8.2:7
at ut (plotly-2.4.2.min.js?ver=5.8.2:7)
at Array.Y.each (plotly-2.4.2.min.js?ver=5.8.2:7)
at SVGGElement. (plotly-2.4.2.min.js?ver=5.8.2:58)
This is the code I have for my chart:
function grafico3()
{
var data = [{
values: [55.7, 41.4, 2.8, 0.07],
labels: ['Smartphone', 'Laptop e Desktop', 'Tablet', 'Console'],
type: 'pie',
textinfo: 'none',
hovertemplate: '<b>%{text}</b>' +
'<br>%{value}%' +
'<extra></extra>',
text: ['Smartphone', 'Laptop e Desktop', 'Tablet', 'Console']
}];
var layout = {
title: 'Quota di traffico per dispositivo'
};
var config = { responsive: true,
displaylogo: false
}
Plotly.newPlot( 'grafico3',
data,
layout,
config
);
}
I attach here two photos oh the broken graph, to show what I mean, the first one is what happen when I increase the screen size, the second one is when I reduce it.