Chartjs-How to create Stacked bar chart from JSON in chart.js

by

1👍

You can try FusionCharts instead to make your charting process delightful. It allows you to instantly create the chart without requiring extensive knowledge of the data structures. And did I mention that the charts look beautiful?

Using FusionCharts Stacked Charts, I have created a sample for you in JSFiddle using your data. 

FusionCharts.ready(function() {


 var revenueChart = new FusionCharts({
    type: 'stackedcolumn2d',
    renderAt: 'chart-container',
    width: '550',
    height: '450',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Alex-John-Mark",
        "subCaption": "",
        "xAxisname": "Month",
        "yAxisName": "Units",

    "paletteColors": "#4A148C,#004D40, #FF6F00",
    "bgColor": "#ffffff",
    "borderAlpha": "20",
    "showCanvasBorder": "0",
    "usePlotGradientColor": "0",
    "plotBorderAlpha": "10",
    "legendBorderAlpha": "0",
    "legendShadow": "0",
    "valueFontColor": "#ffffff",
    "showXAxisLine": "1",
    "xAxisLineColor": "#999999",
    "divlineColor": "#999999",
    "divLineIsDashed": "1",
    "showAlternateHGridColor": "0",
    "subcaptionFontBold": "0",
    "subcaptionFontSize": "14",
    "showHoverEffect": "1"
  },
  "categories": [{
    "category": [{
        "label": "January"
      }, {
        "label": "February"
      }, {
        "label": "March"
      }

    ]
  }],
  "dataset": [{
    "seriesname": "Alex",
    "data": [{
        "value": "10"
      }, {
        "value": "20"
      },

      {
        "value": "10"
      }
    ]
  }, {
    "seriesname": "John",
    "data": [{
        "value": "0"
      }, {
        "value": "30"
      },

      {
        "value": "20"
      }
    ]
  }, {
    "seriesname": "Mark",
    "data": [{
        "value": "0"
      }, {
        "value": "40"
      },

      {
        "value": "0"
      }
    ]
  }]


  }
  }).render();
});

Let me know if this solves your purpose.

-1👍

For This purpose, you can use chart.js
I think, this may help

Leave a comment