CanvaJS React

[mportillo]

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

[Manoj Mohan]

@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