Search code examples
javascripthighchartsdonut-chart

Donut chart with text inside pie and downward as well

i want to create a chart like this enter image description here

i have created it like this

the text added here is explicit with fixed top and left. i want it to be resposive. i.e move when screen size changes. Is there a way for that? in highchart documentation there is only name property given no title property given. my code is given here jsfiddle

 $(function() {
    $('#percentile ').highcharts({
        title: {
            text: 'Section Scores'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
        },
        labels: {
            items: [{
                html: 'Total fruit consumption',
                style: {
                    left: '50px',
                    top: '12px',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                }
            }]
        },
        series: [{
            type: 'pie',
            name: 'Total ',
            data: [{
                name: 'Jane',
                y: 13,
                color: Highcharts.getOptions().colors[0] // Jane's color
            }, {
                name: 'John',
                y: 23,
                color: Highcharts.getOptions().colors[1] // John's color
            }],
            center: [100, 80],
            size: 150,
            innerSize: '70%',
            showInLegend: false,
            dataLabels: {
                enabled: false
            }
        }, {
            type: 'pie',
            name: ' consumption',
            data: [{
                name: 'Jane',
                y: 13,
                color: Highcharts.getOptions().colors[0] // Jane's color
            }, {
                name: 'John',
                y: 23,
                color: Highcharts.getOptions().colors[1] // John's color
            }],
            center: [400, 80],
            size: 150,
            innerSize: '70%',
            showInLegend: false,
            dataLabels: {
                enabled: false
            }
        }]
    });
});
Solution

  • You can use the Highcharts.SVGRenderer class and render custom svg elements on a chart with calculated position, for example:

    chart: {
  events: {
    render: function() {
      var chart = this,
        series1BBox = chart.series[0].group.getBBox(),
        series2BBox = chart.series[1].group.getBBox(),
        x1 = chart.plotLeft + series1BBox.x + series1BBox.width / 2,
        x2 = chart.plotLeft + series2BBox.x + series2BBox.width / 2,
        y1 = chart.plotTop + series1BBox.y + series1BBox.height / 2,
        y2 = chart.plotTop + series1BBox.y + series1BBox.height;

      if (!this.customLabels) { // render custom labels
        chart.customLabels = [];

        this.customLabels[0] = chart.renderer.text('Text 1')
          .css({
            color: '#4572A7',
            fontSize: '16px',
            'vertical-align': 'middle'
          })
          .attr({
            align: 'center'
          })
          .add();
        ...
      }

      // define position
      chart.customLabels[0].attr({
        x: x1,
        y: y1 + chart.customLabels[0].getBBox().height / 2
      });
      ...
    }
  }
}

    Live demo: https://jsfiddle.net/BlackLabel/5sro1tj9/

    API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text