Could not find a declaration file for module chartjs-plugin-stacked100

Question

I am trying to use chartjs-plugin-stacked100 in a React App:

import React, { useEffect, useState } from 'react';
import { Chart } from 'react-chartjs-2';
import ChartjsPluginStacked100 from 'chartjs-plugin-stacked100';

const ConnectedTime = () => {
  // https://designcode.io/react-hooks-handbook-usestate-hook
  // https://designcode.io/react-hooks-handbook-fetch-data-from-an-api
  useEffect(() => {   }, []);
  return <>
      {
    <div>
        <ChartjsPluginStacked100
          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 }
            }
          }} />
    </div>
      }
  </>
}

export default ConnectedTime

When I yarn start this piece of code, I get the error:

TypeScript error in /home/mihamina/.../src/Components/ConnectedTime/ConnectedTime.tsx(4,37):
Could not find a declaration file for module 'chartjs-plugin-stacked100'. 
'/home/mihamina/.../node_modules/chartjs-plugin-stacked100/build/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/chartjs-plugin-stacked100` if it exists 
or add a new declaration (.d.ts) file containing 
`declare module 'chartjs-plugin-stacked100';`

Issuing npm i --save-dev @types/chartjs-plugin-stacked100 : The package does not exist.

I dont quite understand about the .d.ts file:

• Do I create it at the root of the project? (same folder as package.json?)
• Is the required name really .d.ts or should I prepend the name with chartjs-plugin-stacked100?

Answer 1

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.