javascripttypescripthighchartsdata-bindingconsole.log

Highchart Column Chart

UniqueLevels = [Level 0, Level 1, Level 2] Sample Input = [{name:"Level 0",data:[{name: "Job A",y: 0.26},{name: "Job B",y: 0.36}]}, {name:"Level 1",data:[{name: "Job C",y: 0.96},{name: "Job D",y: 0.29}]}, {name:"Level 2",data:[{name: "Job E,y: 0.96},{name: "Job F",y: 0.29}, {name: "Job G",y: 0.29}]}] From the above input need to generate column chart in highchart. I'm able to generate chart.But output differs

Expected output:In x axis level 0,level 1, level 2 need to be there. For level 0 Job A and Job B need to populate, for level 1 Job C and Job D need to populate, for level 2 Job E, Job F and Job G need to populate

Output which i'm getting : For level 0 Job A,Job C,Job E is populating, For level Job B,Job D,Job F is populating, For level 3 Jov G is populating.

In console data is coming correctly,but generating chart i'm not getting expected output.Please help me on this.

Thanks.

Expected output:In x axis level 0,level 1, level 2 need to be there. For level 0 Job A and Job B need to populate, for level 1 Job C and Job D need to populate, for level 2 Job E, Job F and Job G need to populate

Highchart.chart('container1', { chart: { type: 'column' }, xAxis : { categories : UniqueLevels }, series: Sample Input })enter image description here

Solution

  • To achieve such output, you can enable stacking in plotOptions.column options and assign each points' x position to desired x-axis tick.

     plotOptions: {
    column: {
      stacking: 'normal'
    }
  }

    Demo: https://jsfiddle.net/BlackLabel/fvkbpuLd/

    API:
    https://api.highcharts.com/highcharts/plotOptions.column.stacking https://api.highcharts.com/highcharts/series.column.data.x