mercredi 15 juin 2016

Draw Line in Bar with negative stack in HighCharts

In my code i want to Draw a line in every bar of the stacked bar chart.If there is any option in Highcharts to customize the chart like this

enter image description here

I need to draw that Selected portion line and circle in every bar.

My Code

    var categories = ['Atlanta', 'Columbia', 'Ohio', 'Great So'];
$(document).ready(function () {
    $('#container').highcharts({
        title: { text: null },
        subtitle: { text: null },
        credits: {
            enabled: false
        },

        chart: {
            type: 'bar'
        },
        xAxis: [{
            categories: categories,
            reversed: false, //to change x axis starting from top or bottom
            opposite:true,
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            tickLength: 0,

        }],
        yAxis: {
            min: -2250,
            max:2250,
            title: {
                text: null
            },
           gridLineWidth: 0,
           minorGridLineWidth: 0,
           lineColor: 'transparent',
           linewidth: 0,
           plotLines: [{
            color: '#ddd',
            width: 1,
            value: 0
        }],
            labels: {
                //step: 10,
                formatter: function () {
                    var value;

                    if(this.value==0)                                                               value='$-';
                    else if(this.value<0)
                    value='$('+Math.abs(this.value)+')';
                    else
                    value='$'+Math.abs(this.value);

                    return  value;
                }
            }
        },

        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'Male',
            data: [1000,1300,200,300]
        }, {
            name: 'Female',
            data: [1000,-300,-200,300]
        }]
    });
   });

Fiddle :Fiddle

Aucun commentaire:

Enregistrer un commentaire