Chart.js: 100% stacked bar chart

Created on 4 Jun 2016 · 14Comments · Source: chartjs/Chart.js

Is it possible to create a 100% stacked bar chart like this one:
https://developers.google.com/chart/interactive/docs/gallery/columnchart#stacked-column-charts

Thanks.

implement externally enhancement

Source

Peter-Juhasz

Most helpful comment

I wrote the plugin!
see here https://github.com/y-takey/chartjs-plugin-stacked100

y-takey on 23 Mar 2017

👍3

All 14 comments

@Peter-Juhasz how is this different from https://github.com/chartjs/Chart.js/blob/master/samples/bar-stacked.html ?

etimberg on 4 Jun 2016

It is not stretched to 100% on the Y axis. Scroll a little bit more down on the page and look at the chart on the right side. All values are shown in percentages while the original values are still preserved when you hover.

Peter-Juhasz on 4 Jun 2016

Oh, i see with the data going from 0-100.

I think you'd need to do that yourself to format the data. You can modify the callback that reutnrs tick strings to add a percent sign.

etimberg on 4 Jun 2016

It sounds quite of a hack. The chart types do not differ only in format but in behavior. I could prepare my data and find the maximum, then scale all the other values from 0.0 to 1.0, multiply by 100 and format them to a percentage. :) But I need to show the original values on mouse over, not only the formatted percentages, because it really does matter that you have 100% of 1/1 or have 20% of 200/1000.

Peter-Juhasz on 4 Jun 2016

agreed. I'm tagging as an enhancement for now. I'm not yet sure this should reside in the core, since it could make a good plugin

etimberg on 5 Jun 2016

rodrigorrch on 19 Aug 2016

y-takey on 23 Mar 2017

I wrote the plugin!
see here https://github.com/y-takey/chartjs-plugin-stacked100

y-takey on 23 Mar 2017

👍3

@y-takey could you PR a change to the docs that links to that?

etimberg on 23 Mar 2017

@etimberg Thanks! I've sent a following PR. :)
https://github.com/chartjs/Chart.js/pull/4069

y-takey on 24 Mar 2017

Closing since a plugin was written for this.

etimberg on 4 Jul 2017

plugin for stacked 100 chart is not working for me can you help ?
i am using it with react .

reactexcel on 11 Dec 2017

{
  "requires": true,
  "lockfileVersion": 1,
  "dependencies": {
    "chart.js": {
      "version": "2.7.1",
      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.7.1.tgz",
      "integrity": "sha512-pX1oQAY86MiuyZ2hY593Acbl4MLHKrBBhhmZ1YqSadzQbbsBE2rnd6WISoHjIsdf0WDeC0hbePYCz2ZxkV8L+g==",
      "requires": {
        "chartjs-color": "2.2.0",
        "moment": "2.18.1"
      }
    },
    "chartjs-color": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.2.0.tgz",
      "integrity": "sha1-hKL7dVeH7YXDndbdjHsdiEKbrq4=",
      "requires": {
        "chartjs-color-string": "0.5.0",
        "color-convert": "0.5.3"
      }
    },
    "chartjs-color-string": {
      "version": "0.5.0",
      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz",
      "integrity": "sha512-amWNvCOXlOUYxZVDSa0YOab5K/lmEhbFNKI55PWc4mlv28BDzA7zaoQTGxSBgJMHIW+hGX8YUrvw/FH4LyhwSQ==",
      "requires": {
        "color-name": "1.1.3"
      }
    },
    "chartjs-plugin-stacked100": {
      "version": "0.4.4",
      "resolved": "https://registry.npmjs.org/chartjs-plugin-stacked100/-/chartjs-plugin-stacked100-0.4.4.tgz",
      "integrity": "sha512-3TNCQ/NWGk9ks8kUv7OaJsCFyQPRIywqJpwGmXVATeLejUQoJtF3QUboKmk3AWa2iOHwl+vSKyJb2GuYPW51wA==",
      "requires": {
        "chart.js": "2.7.1"
      }
    },

>

reactexcel on 11 Dec 2017

@reactexcel you should report that issue to the plugin repository directly.