Hie,
I’m looking for building an UI with a half pie chart (like this one I published on imgur)
I don’t see these option in the documentation.
How can i achieve this ? Is it an option in the pie chart ?
Thank you in advance !
Hie,
I’m looking for building an UI with a half pie chart (like this one I published on imgur)
I don’t see these option in the documentation.
How can i achieve this ? Is it an option in the pie chart ?
Thank you in advance !
There’s currently no easy to achieve this in plotly.js.
I’d recommend passing a dummy label with value corresponding to 50% of the total of the other labels. And playing around with https://plot.ly/javascript/reference/#pie-rotation to get the desired results.
@adoveil-presta , i looked at something that might help you:
Copying from this reference above:
var degrees = 115, radius = .6;
var radians = degrees * Math.PI / 180;
var x = -1 * radius * Math.cos(radians);
var y = radius * Math.sin(radians);
var layout = {
title: 'Number of Printers Sold in a Week',
xaxis: {visible: false, range: [-1, 1]},
yaxis: {visible: false, range: [-1, 1]}
};
var traceA = {
type: "pie",
showlegend: false,
hole: 0.4,
rotation: 90,
values: [100 / 5, 100 / 5, 100 / 5, 100 / 5, 100 / 5, 100],
text: ["Very Low", "Low", "Average", "Good", "Excellent", ""],
direction: "clockwise",
textinfo: "text",
textposition: "inside",
marker: {
colors: ["rgba(255, 0, 0, 0.6)", "rgba(255, 165, 0, 0.6)", "rgba(255, 255, 0, 0.6)", "rgba(144, 238, 144, 0.6)", "rgba(154, 205, 50, 0.6)", "white"]
},
labels: ["0-10", "10-50", "50-200", "200-500", "500-2000", ""],
hoverinfo: "label"
};
var data = [traceA];
Plotly.plot('mydiv2', data, layout, {staticPlot: true});