CODEWITHSUNDEEP
javascripthighcharts
chidog12
chidog12

Reputation: 61

Highcharts: Dynamically add series value to category name

Working with a simple highcharts bar graph such as so: http://jsfiddle.net/bvuWR/106/

$(function () {
var chart;
$(document).ready(function() {

    $("#updateAxis").click(function(){
        chart.xAxis[0].setCategories(['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas', 'Lemon']);
        for (var i = 0; i < chart.series.length; i++)
        {
            chart.series[i].addPoint(Math.random() * 5, true, true);
        }
    });

    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        title: {
            text: 'Stacked bar chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            }
        },
        legend: {
            backgroundColor: '#FFFFFF',
            reversed: true
        },
        tooltip: {
            formatter: function() {
                return ''+
                    this.series.name +': '+ this.y +'';
            }
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
            series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    });        
});

});

Is there any way that I can grab data passed as a data series and add under the category?

This example has the data hardcoded in the config, however, I'll be passing the values to the data series dynamically and the value in the category would need to change as well.

Upvotes: 0

Views: 1459

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

You can set axis type as category and define categories from points names. 

  xAxis: {
    type: 'category'
  },
  series: [{
    name: 'John',
    data: [{
      y: 5,
      name: 'Apples'
    }, {
      y: 2,
      name: 'Oranges'
    }, {
      y: 3,
      name: 'Pears'
    }]
  }]

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

API: https://api.highcharts.com/highcharts/xAxis.categories

Upvotes: 1

Related Questions