Half pie / donut

plotly.js
#1

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 !

#2

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.

#3

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