Add a chart using ReactJS

Add a chart using ReactJS

Posted by: jerome on 17 March 2020, 6:01 pm EST

• 

  jerome

  • Post Options:
  • Link
    Copy

  Posted 17 March 2020, 6:01 pm EST - Updated 3 October 2022, 10:26 am EST

  is there any sample script for embedding the chart in SpreadJS13 ? btw im using ReactJS , anyhelp would appreciate

  this is the error we encountered, is there any library to be add ? thanks
  
  

  

  798×701 76.5 KB

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 18 March 2020, 1:16 am EST

  Hi Jerome,

  For adding charts support, we need to add the “@grapecity/spread-sheets-charts” package to our application too. Please refer to the following sample and let us know if you face any issues:
  
  https://codesandbox.io/s/interesting-morse-d3qdk

  Regards
  
  Sharad

• 

  jerome

  • Post Options:
  • Link
    Copy

  Posted 18 March 2020, 3:51 pm EST

  got it thanks i try this one first

• 

  jerome

  • Post Options:
  • Link
    Copy

  Posted 18 March 2020, 4:28 pm EST - Updated 3 October 2022, 10:26 am EST

  i followed the link you provided but seems theres error i encounter ?
  
  

  

  1360×708 91.6 KB

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 19 March 2020, 4:53 am EST

  Hi Jerome,

  Have you imported the charts module in your component like the following code snippet:

  import * as GC from "@grapecity/spread-sheets";
  import "@grapecity/spread-sheets-charts";
  

  If yes, please share a sample that replicates the issue so that we could further investigate it and assist you accordingly.

• 

  jerome

  • Post Options:
  • Link
    Copy

  Posted 19 March 2020, 5:55 am EST - Updated 3 October 2022, 10:27 am EST

  hello tomer, yes i import that already, first i install that via yarn ,

  yarn add @grapecity/spread-sheets-charts and it add on the package.json

  

  1230×406 46.6 KB

  ,

  then i create a separate file for that spreadsheet,

  

  1062×480 48.7 KB

  and call that clusteredBarCharts function for testing to render a sample chart

  

  1562×1090 84.1 KB

  then this error i encountered

  

  1360×708 91.6 KB

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 20 March 2020, 1:18 am EST

  In the shared screenshot, the version of the @grapecity/spread-sheets-react used is 13.0.3 whereas the version used for @grapecity/spread-sheets-charts package is 13.0.7. Please make sure that you are using the same version of both the packages.

• 

  jerome

  • Post Options:
  • Link
    Copy

  Posted 20 March 2020, 6:34 am EST - Updated 3 October 2022, 10:27 am EST

  Nice!!!
  
  Very thankful @sharad.tomer

  

  810×689 113 KB