SOLVED

ChartJs How to Include and Consume

%3CLINGO-SUB%20id%3D%22lingo-sub-2022964%22%20slang%3D%22en-US%22%3EChartJs%20How%20to%20Include%20and%20Consume%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2022964%22%20slang%3D%22en-US%22%3E%3CP%3EI%20am%20trying%20to%20use%20this%20web%20page%20to%20create%20a%20Chart.JS%20webpart.%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdataninjago.com%2F2016%2F11%2F28%2Fbuilding-sharepoint-framework-client-side-chart-web-parts-using-chart-js%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdataninjago.com%2F2016%2F11%2F28%2Fbuilding-sharepoint-framework-client-side-chart-web-parts-using-chart-js%2F%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20having%20only%20one%20problem%20when%20I%20try%20to%20consume%20the%20ChartJS%20object%20at%20this%20line%20of%20code%3A%3C%2FP%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3Econst%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3Echart%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3D%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3Enew%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3EjsChart%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Ectx%3C%2FSPAN%3E%3CSPAN%3E%2C%26nbsp%3B%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EThe%20error%20is%3A%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EError%20-%20%5Btsc%5D%20src%2Fwebparts%2FchartJs%2Fcomponents%2FChartJs.tsx(38%2C19)%3A%20error%20TS2351%3A%20Cannot%20use%20'new'%20with%20an%20expression%20whose%20type%20lacks%20a%20call%20or%20construct%20signature.%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EI%20am%20adding%20the%20ChartJS%20cdn%20in%20the%20config.json%20file%20in%20the%20externals%20section%3A%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E%22externals%22%3C%2FSPAN%3E%3CSPAN%3E%3A%26nbsp%3B%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E%22jsChart%22%3C%2FSPAN%3E%3CSPAN%3E%3A%26nbsp%3B%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E%22path%22%3C%2FSPAN%3E%3CSPAN%3E%3A%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E%22%3CA%20href%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2FChart.js%2F2.9.4%2FChart.bundle.min.js%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2FChart.js%2F2.9.4%2FChart.bundle.min.js%3C%2FA%3E%22%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E%22globalName%22%3C%2FSPAN%3E%3CSPAN%3E%3A%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E%22jsChart%22%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3EWhat%20am%20I%20supposed%20to%20be%20doing%20differently%3F%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2022964%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ECharts%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EExternal%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EExternals%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2024281%22%20slang%3D%22en-US%22%3ERe%3A%20ChartJs%20How%20to%20Include%20and%20Consume%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2024281%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F288947%22%20target%3D%22_blank%22%3E%40smithme%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3EJSChart%20internally%20depends%20on%20jQuery%20so%20you%20have%20to%20refer%20the%20jQuery%20also%20on%20the%20externals%20section%20and%20add%20a%20dependency%20to%20jQuery%20in%20JSChart%20reference%20in%20the%20external%20section.%3C%2FP%3E%3CP%3EAlso%2C%20in%20the%20code%20you%20have%20to%20use%20either%20import%20or%20require%20on%26nbsp%3B%3CSTRONG%3E%3CSPAN%3EjsChart%3C%2FSPAN%3E%3C%2FSTRONG%3E%20and%20once%20you%20have%20done%20all%20the%20pre-requisites%20you%20should%20be%20able%20to%20use%20the%20method.%26nbsp%3B%3C%2FP%3E%3CP%3EWhy%20don't%20you%20try%20using%20the%20npm%20package%20available%20for%20Chart.js%3F%20It%20would%20be%20a%20straight%20forward%20method%20instead%20of%20using%20all%20the%20externals%20section%20configuration.%20Please%20refer%20the%20below%20link%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fwww.chartjs.org%2Fdocs%2Flatest%2Fgetting-started%2Finstallation.html%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3EInstallation%20%C2%B7%20Chart.js%20documentation%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Contributor

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-c...

 

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?
 
1 Reply
Best Response confirmed by smithme (Contributor)
Solution

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..