# Half pie / donut

**URL:** https://community.plotly.com/t/half-pie-donut/168
**Category:** plotly.js
**Created:** [November 30, 2015, 3:06pm UTC](https://community.plotly.com/t/half-pie-donut/168 "2015-11-30T15:06:35Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![adoveil-presta](https://avatars.discourse-cdn.com/v4/letter/a/f4b2a3/32.png) [@adoveil-presta](https://community.plotly.com/u/adoveil-presta)
#### Post date: [November 30, 2015, 3:06pm UTC](https://community.plotly.com/t/half-pie-donut/168/1 "2015-11-30T15:06:35Z")

</div>

Hie,

I’m looking for building an UI with a **half pie chart** (like [this one I published on imgur](http://i.imgur.com/VeGiLDO.png))

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 !

---

<div class="post-metadata">

### Author: ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)
#### Post date: [December 9, 2015, 3:07pm UTC](https://community.plotly.com/t/half-pie-donut/168/2 "2015-12-09T15:07:48Z")

</div>

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](https://plot.ly/javascript/reference/#pie-rotation) to get the desired results.

---

<div class="post-metadata">

### Author: ![gzaican](https://avatars.discourse-cdn.com/v4/letter/g/dec6dc/32.png) [@gzaican](https://community.plotly.com/u/gzaican)
#### Post date: [September 8, 2021, 7:54pm UTC](https://community.plotly.com/t/half-pie-donut/168/3 "2021-09-08T19:54:52Z")

</div>

@adoveil-presta , i looked at something that might help you:

> **[Create Interactive Charts Using Plotly.js, Part 5: Pie and Gauge Charts](https://code.tutsplus.com/tutorials/create-interactive-charts-using-plotlyjs-pie-and-gauge-charts--cms-29216)**
>
> If you have been following this series from the beginning, you might have noticed that Plotly.js uses the same scatter type for creating both line charts and bubble charts. The only difference is...

Copying from this reference above:

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

```