Home forums Using CanvasJS CanvaJS React

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #28203

    Hi,

    I am having issues trying to use CanvasJS on React, I followed the steps from here https://canvasjs.com/docs/charts/integration/react/ and tried simple code sample I downloaded from the website too:

    import React, { Component } from 'react';
    import CanvasJSReact from './lib/canvasjs.react';
    //import CanvasJSReact from 'chart.js';
    var CanvasJSChart = CanvasJSReact.CanvasJSChart;
     
    class PieChart extends Component {
    	render() {
    		const options = {
    			exportEnabled: true,
    			animationEnabled: true,
    			title: {
    				text: "Website Traffic Sources"
    			},
    			data: [{
    				type: "pie",
    				startAngle: 75,
    				toolTipContent: "<b>{label}</b>: {y}%",
    				showInLegend: "true",
    				legendText: "{label}",
    				indexLabelFontSize: 16,
    				indexLabel: "{label} - {y}%",
    				dataPoints: [
    					{ y: 18, label: "Direct" },
    					{ y: 49, label: "Organic Search" },
    					{ y: 9, label: "Paid Search" },
    					{ y: 5, label: "Referral" },
    					{ y: 19, label: "Social" }
    				]
    			}]
    		}
    		
    		return (
    		<div>
    			<h1>React Pie Chart</h1>
    			<CanvasJSChart options = {options} 
    				/* onRef={ref => this.chart = ref} */
    			/>
    			{/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/}
    		</div>
    		);
    	}
    }
    
    export default PieChart;

    I tried to build it, but it throws an SyntaxError from the CanvasJS File, I also tried with the NPM version, but I had the same issue. Syntax Error:

    https://ibb.co/71LSxRF

    #28220

    @mportillo,

    It seems to be working fine. Can you kindly create a sample project reproducing the issue and share it with us over Google-Drive or Onedrive so that we can look into your code, understand the scenario better and help you out?

    —-
    Manoj Mohan
    Team CanvasJS

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.