CODEWITHSUNDEEP
highcharts
Einstein_AB
Einstein_AB

Reputation: 436

Legends Name Over Bar Charts Instead of Value

I am looking at this example here. The example depicts showing values of bar charts over the bars. What I was hoping to do that is there a way where I can show legends name like 'Apples', 'Oranges' etc on the bar chart.

What I have done so far is : 

Highcharts.chart('chartDiv_'+widgetId, {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Project Release Chart'
    },
    xAxis: {
        categories: x_axis
    },
    yAxis: {
        min: 0,
        max: 100,
        reversedStacks : false,
        labels: {
            formatter: function() {
                return this.value+"%";
            }
        },
        title: {
            text: 'Percentage'
        }
    },
    credits: {
        enabled: false
    },
    tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
        shared: false
    },
    legend: {
        //enabled: false,
        reversed: false
    },
    plotOptions: {
        series: {
            /*events: {
                legendItemClick: function() {
                    return false;
                }
            },*/
            stacking: 'percentage',
            pointWidth: 60,
            dataLabels: {
                enabled: true
            }
        }
    },
    series: y_axis
});

I would like to have legends name instead of values on bar charts.

Upvotes: 0

Views: 57

Answers (1)

Einstein_AB
Einstein_AB

Reputation: 436

I was able to do this by customizing 'dataLabels' attribute of 'plotOptions'. I added the following code in plotOptions :

plotOptions: {
        series: {
            stacking: 'percentage',
            pointWidth: 60,
            dataLabels: {
                enabled: true,
                format : '{series.name}',
                style : {
                    color: '#DCDCDC', 
                    fontSize: '15px', 
                    fontWeight: 'pointer', 
                    textOutline: '0px contrast'
                }
            }
        }
    },

-> format : '{series.name}' to be specific

Upvotes: 1

Related Questions