CanvasJS v3.2.15 in React TypeScript project – does not work!

[jlaguma]

CanvasJS v3.2.15 does not work inside the React TypeScript project.
Following steps were taken to install it:
1. put canvasjs.min.js and canvasjs.react.js into src/assets/ folder
2. Import it into a component as per code below

import React, { FC } from 'react';

import CanvasJSReact from '../../../assets/canvasjs.react.js';

import { TsChartProps } from './types';
import { useStyles } from './styles';

export const TsChart: FC<TsChartProps> = ({ title = '', height, width }) => {
  let CanvasJSChart = CanvasJSReact.CanvasJSChart;
  const classes = useStyles({ height, width });
  const options = {
    title: {
      text: 'Basic Column Chart in React',
    },
    data: [
      {
        type: 'column',
        dataPoints: [
          { label: 'Apple', y: 10 },
          { label: 'Orange', y: 15 },
          { label: 'Banana', y: 25 },
          { label: 'Mango', y: 30 },
          { label: 'Grape', y: 28 },
        ],
      },
    ],
  };

  return (
    <div className={classes.chart}>
      <CanvasJSChart options={options} />
    </div>
  );
};

3. yarn start or npm start get stuck forever.
4. commenting out CanvasJS stuff from component, yarn start and npm start starts up the project just fine.

This is a TypeScript project. Are there instructions available to get CanvasJS working in React TypeScript? Because at the moment it’s totally broken.

Thanks.

[Indranil]

@jlaguma,

Can you kindly create a sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive along with sample data so that we can run the code locally to understand the scenario better and help you resolve it?

From what we have observed, sometimes things get delayed mostly when we are not able to reproduce the issue at our end or not able to understand the exact requirements or due to the variation in chart-options being used by you and us. Because of these reasons we expect you to share sample project along with sample data(dummy data) which helps us run it locally at our end to understand the use case and help you resolve it.

___________
Indranil Deo
Team CanvasJS