Forum Discussion

smithme's avatar
smithme
Brass Contributor
Dec 30, 2020

ChartJs How to Include and Consume

I am trying to use this web page to create a Chart.JS webpart.

https://dataninjago.com/2016/11/28/building-sharepoint-framework-client-side-chart-web-parts-using-chart-js/

 

I am having only one problem when I try to consume the ChartJS object at this line of code:

const chart = new jsChart(ctx, {
 
The error is:
Error - [tsc] src/webparts/chartJs/components/ChartJs.tsx(38,19): error TS2351: Cannot use 'new' with an expression whose type lacks a call or construct signature.
 
I am adding the ChartJS cdn in the config.json file in the externals section:
  "externals": {
    "jsChart": {
      "globalName": "jsChart"
    }
  }
 
What am I supposed to be doing differently?
 
Charts
External
Externals
  • Sudharsan K's avatar
    Sudharsan K
    Dec 31, 2020

    Hi smithme 

    JSChart internally depends on jQuery so you have to refer the jQuery also on the externals section and add a dependency to jQuery in JSChart reference in the external section.

    Also, in the code you have to use either import or require on jsChart and once you have done all the pre-requisites you should be able to use the method. 

    Why don't you try using the npm package available for Chart.js? It would be a straight forward method instead of using all the externals section configuration. Please refer the below link

    Installation · Chart.js documentation

     

    Hope it helps, please like it or mark it as a solution if it resolves your clarification or issue
    -Sudharsan K..

  • Sudharsan K's avatar
    Sudharsan K
    Steel Contributor
    Dec 31, 2020

    Hi smithme 

    JSChart internally depends on jQuery so you have to refer the jQuery also on the externals section and add a dependency to jQuery in JSChart reference in the external section.

    Also, in the code you have to use either import or require on jsChart and once you have done all the pre-requisites you should be able to use the method. 

    Why don't you try using the npm package available for Chart.js? It would be a straight forward method instead of using all the externals section configuration. Please refer the below link

    Installation · Chart.js documentation

     

    Hope it helps, please like it or mark it as a solution if it resolves your clarification or issue
    -Sudharsan K..

Resources