React highcharts, show legends as bar

Question

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

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!

Hi @Saurabh Mishra and welcome to StackOverflow. Your question needs editing as some text is hidden and your code is not formatted. — Ioannis Barakos

ppotaczek ppotaczek · Accepted Answer · 2019-10-25T10:18:41

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/

React highcharts, show legends as bar

1 Answers