Search code examples
highchartspie-chartreact-highcharts

React highcharts, show legends as bar

This code is displaying the legends as circle, <<<

I want to display the legends as bar as shown in the below image.

My requirement is the legends should be displayed as bar instead of circles

enter image description here

Here you can take a look at my code:

Highcharts.chart('flow', {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: 'pie',
          width: 500,
          height: 260,
          style:{
            marginBottom:"30px"
          }
        },
        title: {
          text: 'Flow',
          x: 90,
          y: 80,
          style:{
            fontSize:"25px",
            fontWeight:600
          }
        },
        tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: true,
              distance:-30,
              color:'white',
              fontSize:'9px',
              format: '{point.percentage:.1f} %',
              style: {
                textOutline: false 
              }
            },
            showInLegend: true
          }
        },
        credits: {
          enabled: false
        },
    legend: {
      align: 'right',
      layout: 'vertical',
      verticalAlign: 'middle', 
      x: -100,
      y: 90,
    },
    series: [{
      name: 'Flow',
      colorByPoint: true,
      data: [{
        name: 'Owned',
        y: 74,
        color:"#f5990f"
      },{
        name: 'Invited',
        y: 36,
        color:"#fce61e"
      }]
    }]
});

Highcharts.chart('flow', { chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie', width: 500, height: 260, style:{ marginBottom:"30px" } }, title: { text: 'Flow', x: 90, y: 80, style:{ fontSize:"25px", fontWeight:600 } }, tooltip: { pointFormat: '{series.name}: {point.percentage:.1f}%' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, distance:-30, color:'white', fontSize:'9px', format: '{point.percentage:.1f} %', style: { textOutline: false } }, showInLegend: true } }, credits: { enabled: false }, legend: { align: 'right', layout: 'vertical', verticalAlign: 'middle', x: -100, y: 90, }, series: [{ name: 'Flow', colorByPoint: true, data: [{ name: 'Owned', y: 74, color:"#f5990f" },{ name: 'Invited', y: 36, color:"#fce61e" }] }] });

I would appreciate any help that I can get to achieve this. Thanks!

Solution

  • You can create additional column charts and place them under the legend items:

    chart: {
    events: {
        load: function() {
            var columnChart1 = Highcharts.chart("columnChart1", columnChartOptions),
                columnChart2,
                xPos = this.legend.group.translateX,
                yPos = this.legend.group.translateY,
                items = this.legend.allItems;

            columnChartOptions.series[0].data = [76];
            columnChartOptions.series[0].color = 'yellow';
            columnChart2 = Highcharts.chart("columnChart2", columnChartOptions);

            columnChart1.renderTo.style.top = yPos + 50 + 15 + items[0]._legendItemPos[1] + 'px';
            columnChart1.renderTo.style.left = xPos + 'px';

            columnChart2.renderTo.style.top = yPos + 50 + 15 + items[1]._legendItemPos[1] + 'px';
            columnChart2.renderTo.style.left = xPos + 'px';
        }
    }
}

    Live demo: http://jsfiddle.net/BlackLabel/wsc4be92/