Search code examples
javascripthighchartspie-chart

How to create pie chart with only 1 series data and have background be a circle

Ok, using highcharts and I need to create a pie chart with only 1 data and the rest of the circle is a gray line that does not do anything. Is there anyways to do this? Currently, with the following code I have I have to set a data point so that it contains a percentage, but not able to disable the gray section in this pic: pic of what I have

But I need the gray section to not be able to be selected, and would help if it looked more like the design in the sense that the gray part is thinner. Design here: pic of what I need

My current options for this pie chart is as follows:

    {  
   "chart":{  
      "renderTo":"amenity-0",
      "plotBackgroundColor":null,
      "plotBorderWidth":0,
      "plotShadow":false,
      "height":220,
      "marginBottom":40,
      "spacingBottom":30
   },
   "title":{  
      "text":"Amenity 1",
      "align":"center",
      "verticalAlign":"bottom",
      "y":15
   },
   "credits":{  
      "enabled":false
   },
   "tooltip":{  
      "headerFormat":"",
      "pointFormat":"{point.name}: <b>{point.percentage:.1f}%</b>"
   },
   "plotOptions":{  
      "pie":{  
         "dataLabels":{  
            "enabled":true,
            "distance":-50,
            "style":{  
               "fontWeight":"bold",
               "color":"white"
            }
         },
         "startAngle":0,
         "endAngle":360,
         "center":[  
            "50%",
            "50%"
         ],
         "size":"100%"
      }
   },
   "series":[  
      {  
         "type":"pie",
         "name":"Amenity 1",
         "innerSize":"60%",
         "data":[  
            {  
               "name":"Amenity 1",
               "y":69,
               "color":"#C1AFBD",
               "dataLabels":{  
                  "enabled":false
               }
            },
            {  
               "name":"Gray Section",
               "y":31,
               "color":"#E9EDF0",
               "dataLabels":{  
                  "enabled":false
               }
            }
         ]
      }
   ]
}

I have tried using the pointFormatter function instead of pointFormat and returning false if the point.name === 'Gray Section', but this did not remove the tooltip. It just created a blank tooltip. In any case, I would like for the gray section to be thinner like in the design and not to be part of the data if possible.

Is this possible? Any ideas on how to achieve this exactly? Thanks guys/gals.

Solution

  • Regarding the tooltip, you could use some sort of condition for the general tooltip.formatter to disable the tooltip for a given point, like setting noTooltip for the given point. For example (JSFiddle):

    tooltip: {
    formatter: function() {
        if(!this.point.noTooltip) {
            return '<span style="color:' + this.point.color + '">●</span>' + 
                this.series.name + '<br/>' + 
                'Value: ' + this.point.y + '<br/>';
        }

        return false;
    },
    hideDelay: 0
},
series: [{
    data: [{
        y: 70
    }, {
        y: 30,
        noTooltip: true
    }]
}]

    Regarding the thinner gray section you could use a variablepie instead and set different z values to make the actual value stand out more. For example (JSFiddle):

    chart: {
    type: 'variablepie'
},
series: [{
    innerSize: '40%',
    zMin: 0,
    zMax: 100,
    data: [{
        y: 70,
        z: 10,
    }, {
        y: 30,
        z: 0.1,
        color: 'lightgray'
    }]
}]

    It requires the following module imported:

    <script src="https://code.highcharts.com/modules/variable-pie.js"></script>