CODEWITHSUNDEEP
highchartspie-chartreact-highcharts
Saurabh Mishra
Saurabh Mishra

Reputation: 335

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!

Upvotes: 0

Views: 806

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

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/

Upvotes: 1

Related Questions