Chart.js 3.0 support

[benmccann]

Chart.js 3.0 is out now. It'd be great to see this plugin updated

[y-takey]

Hi @benmccann , Thank you for telling me about chart.js@3 🎉
I would like to update this plugin in the near future!

[jagdaleganesh]

Hi , I would like to use this plugin. How I can use with latest ChartJS version. I need to register the plugin first before use.
Please let me know how I can use the it with latest chartjs version.
In case this plugin is not yet updated, is there any workaround to use with latest chartjs version.

@y-takey , I am waiting for your reply.

Thanks,

[y-takey]

Hi @jagdaleganesh , thanks for the request :)
It is WIP now, so please wait a little more.

[y-takey]

published chartjs-plugin-stacked100@1.0.0 supported Chart.js@3 :)
It has breaking change. you need register the plugin manualy.

import { Chart } from "chart.js";
import ChartjsPluginStacked100 from "chartjs-plugin-stacked100";

Chart.register(ChartjsPluginStacked100);

[jagdaleganesh]

Thank you

[mkismy]

Using the example on readme via CDN, it does not work as expected and become a normal bar chart.

<div style="width: 700px; height: 300px">
  <canvas id="my-chart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-stacked100"></script>
<script type="text/javascript">
Chart.register(ChartjsPluginStacked100);

new Chart(document.getElementById("my-chart"), {
  type: "bar",
  data: {
    labels: ["Foo", "Bar"],
    datasets: [
      { label: "bad", data: [5, 25], backgroundColor: "rgba(244, 143, 177, 0.6)" },
      { label: "better", data: [15, 10], backgroundColor: "rgba(255, 235, 59, 0.6)" },
      { label: "good", data: [10, 8], backgroundColor: "rgba(100, 181, 246, 0.6)" }
    ]
  },
  options: {
    indexAxis: "y",
    plugins: {
      stacked100: { enable: true }
    }
  }
});
</script>

When adding stacked option, the bar stacks but doesn't become a 100% stacked bar.

  options: {
    indexAxis: "y",
    scales: {
      x: { stacked: true },
      y: { stacked: true },
    },
    plugins: {
      stacked100: { enable: true }
    }
  }

@y-takey Can you check if there are anything wrong with the code above?

[y-takey]

@mkismy Thanks for the issue :)
Sorry, the example was wrong. here is correctly example.

Chart.register(ChartjsPluginStacked100.default);  // HERE!

new Chart(document.getElementById("my-chart"), {
  type: "bar",
  data: {
    labels: ["Foo", "Bar"],
    datasets: [
      { label: "bad", data: [5, 25], backgroundColor: "rgba(244, 143, 177, 0.6)" },
      { label: "better", data: [15, 10], backgroundColor: "rgba(255, 235, 59, 0.6)" },
      { label: "good", data: [10, 8], backgroundColor: "rgba(100, 181, 246, 0.6)" }
    ]
  },
  options: {
    indexAxis: "y",
    plugins: {
      stacked100: { enable: true }
    }
  }
});

I will fix readme later.

[mkismy]

Thank you 😁