CODEWITHSUNDEEP
jsonhighchartsbar-chart
Einstein_AB
Einstein_AB

Reputation: 436

Highcharts stacked bar chart for multiple bars

I have a requirement where I need to display bar charts showing progress of release. Where I need to show overall along with each child release under it.

My x-axis Json looks like : https://jsonblob.com/b9dff016-2f79-11e9-9080-15acf9a0cdee

My y-axis Json looks like : https://jsonblob.com/87f94869-2f79-11e9-9080-bd5614234be8

When I try to plot just one bar, this works fine. But as I send data for two bars like stated in the json above it shows 'No Data to Display'

Highchart :

Highcharts.chart('chartDiv_'+widgetId, {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Project Progress'
    },
    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><br/>',
        shared: false
    },
    legend: {
        enabled: false,
        reversed: false
    },
    plotOptions: {
        series: {
            stacking: 'percentage',
            pointWidth: 60,
            dataLabels: {
                enabled: true,
                format : '{series.name}',
                style : {
                    color: '#DCDCDC',
                    fontSize: '13px',
                    fontWeight: 'pointer',
                    textOutline: '0px contrast',
                    textShadow: 'none'
                }
            }
        }
    },
    series: y_axis
});

Upvotes: 2

Views: 2218

Answers (1)

ewolden
ewolden

Reputation: 5803

Your y_axis (or series) is misconfigured.

You have this setup:

series: [
  [
    {datapoint 1 bar 1},
    {datapoint 2 bar 1},
    ...
  ], 
  [
    {datapoint 1 bar 2},
    {datapoint 2 bar 2},
    ...
  ]
]

Highcharts only accept series definitions in the following way:

series: [
  {datapoint 1 bar 1},
  {datapoint 2 bar 1},
  ...,
  {datapoint 1 bar 2},
  {datapoint 2 bar 2},
  ...
]

Alternatively you can do:

series: [
  {datapoint 1-N bar 1},
  {datapoint 1-N bar 2},
  ...
]

That said, what you probably want to do is:

series: [
  {
    name: "1-PI-1",
    data: [{x: 0, y: 20.25}] //x: 0 = first category
  }, {
    name: "1-PI-2",
    data: [{x: 0, y: 30.38}]
  }, 
  ..., 
  {
    name: "1-PI-1",
    data: [{x: 1, y: 36.59}]  //x: 1 = second category
  },
  ...
]

Here, x: 0 refers to the first category, and x: 1 refers to the second category.

var y_axis = 
  [{
    "name": "1-PI-1",
    "data": [{x: 0, y: 20.25}],
    "color": "#136e2a",
    "index": 0
  }, {
    "name": "1-PI-2",
    "data": [{x: 0, y: 30.38}],
    "color": "#3399ff",
    "index": 1
  }, {
    "name": "1-Alpha",
    "data": [{x: 0, y: 46.84}],
    "color": "#9933ff",
    "index": 2
  }, {
    "name": " ",
    "data": [{x: 0, y: 0.0}],
    "color": "#4d4d4d",
    "index": 3
  }, {
    "name": " ",
    "data": [{x: 0, y: 0.0}],
    "color": "#4d4d4d",
    "index": 4
  }, {
    "name": " ",
    "data": [{x: 0, y: 2.53}],
    "color": "#4d4d4d",
    "index": 5
  },
  {
    "name": "1-PI-1",
    "data": [{x: 1, y: 36.59}],
    "color": "#136e2a",
    "index": 0
  }, {
    "name": "1-PI-2",
    "data": [{x: 1, y: 34.15}],
    "color": "#3399ff",
    "index": 1
  }, {
    "name": " ",
    "data": [{x: 1, y: 2.44}],
    "color": "#4d4d4d",
    "index": 2
  }, {
    "name": " ",
    "data": [{x: 1, y: 26.83}],
    "color": "#4d4d4d",
    "index": 3
  }, {
    "name": " ",
    "data": [{x: 1, y: 0.0}],
    "color": "#4d4d4d",
    "index": 4
  }, {
    "name": " ",
    "data": [{x: 1, y: 0.0}],
    "color": "#4d4d4d",
    "index": 5
  }]

var x_axis = ["Project 1", "Project 2"]

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Project Progress'
  },
  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><br/>',
    shared: false
  },
  legend: {
    enabled: false,
    reversed: false
  },
  plotOptions: {
    series: {
      stacking: 'percentage',
      pointWidth: 60,
      dataLabels: {
        enabled: true,
        format: '{series.name}',
        style: {
          color: '#DCDCDC',
          fontSize: '13px',
          fontWeight: 'pointer',
          textOutline: '0px contrast',
          textShadow: 'none'
        }
      }
    }
  },
  series: y_axis
});
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

Working JSFiddle: https://jsfiddle.net/ewolden/rzwkeysm/15/

API on bar.data: https://api.highcharts.com/highcharts/series.bar.data

Upvotes: 2

Related Questions