0👍
I managed to make it work:
- Create a
global.d.ts
and declare the module - Use the
Bar
component
Content of global.d.ts
:
declare module 'chartjs-plugin-stacked100';
declare module 'chartjs-plugin-stacked100'{
export function ChartjsPluginStacked100(): function
}
Use of Bar
:
import { Chart, Bar } from 'react-chartjs-2';
import ChartjsPluginStacked100 from 'chartjs-plugin-stacked100';
Chart.register(ChartjsPluginStacked100);
const ChartData = (props: any) => {
return <>
{
<div>
<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 }
}
}} />
</div>
}
</>
};
export default ChartData
I updated the documentation and requested a pull at: https://github.com/y-takey/chartjs-plugin-stacked100/pull/48 , where I wrote a small sample React app that uses the plugin.
- Chartjs-Can "Bar" be placed center of vertical grid line in Chart.js?
- Chartjs-Using Chartjs 2.7.1—legend doesn't have align configuration options—how to add it?
Source:stackexchange.com