Breaking News: Grepper is joining You.com. Read the official announcement!

react charts

Vinay Vishwakarma answered on March 24, 2024 Popularity 9/10 Helpfulness 1/10

answer react charts

react charts

Comment

/* App.js */
import React, { Component } from 'react';
import CanvasJSReact from '@canvasjs/react-charts';
//var CanvasJSReact = require('@canvasjs/react-charts');
 
var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;
class App extends Component {
	constructor() {
		super();
		this.toggleDataSeries = this.toggleDataSeries.bind(this);
	}
	toggleDataSeries(e){
		if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
			e.dataSeries.visible = false;
		}
		else{
			e.dataSeries.visible = true;
		}
		this.chart.render();
	}
	render() {
		const options = {
			animationEnabled: true,
			exportEnabled: true,
			title: {
				text: "Operating Expenses of ACME",
				fontFamily: "verdana"
			},
			axisY: {
				title: "in Eur",
				includeZero: true,
				prefix: "€",
				suffix: "k"
			},
			toolTip: {
				shared: true,
				reversed: true
			},
			legend: {
				verticalAlign: "center",
				horizontalAlign: "right",
				reversed: true,
				cursor: "pointer",
				itemclick: this.toggleDataSeries
			},
			data: [
			{
				type: "stackedColumn",
				name: "General",
				showInLegend: true,
				yValueFormatString: "#,###k",
				dataPoints: [
					{ label: "Jan", y: 14 },
					{ label: "Feb", y: 12 },
					{ label: "Mar", y: 14 },
					{ label: "Apr", y: 13 },
					{ label: "May", y: 13 },
					{ label: "Jun", y: 13 },
					{ label: "Jul", y: 14 },
					{ label: "Aug", y: 14 },
					{ label: "Sept", y: 13 },
					{ label: "Oct", y: 14 },
					{ label: "Nov", y: 14 },
					{ label: "Dec", y: 14 }
				]
			},
			{
				type: "stackedColumn",
				name: "Marketing",
				showInLegend: true,
				yValueFormatString: "#,###k",
				dataPoints: [
					{ label: "Jan", y: 13 },
					{ label: "Feb", y: 13 },
					{ label: "Mar", y: 15 },
					{ label: "Apr", y: 16 },
					{ label: "May", y: 17 },
					{ label: "Jun", y: 17 },
					{ label: "Jul", y: 18 },
					{ label: "Aug", y: 18 },
					{ label: "Sept", y: 17 },
					{ label: "Oct", y: 18 },
					{ label: "Nov", y: 18 },
					{ label: "Dec", y: 18 }
				]
			},
			{
				type: "stackedColumn",
				name: "Sales",
				showInLegend: true,
				yValueFormatString: "#,###k",
				dataPoints: [
					{ label: "Jan", y: 13 },
					{ label: "Feb", y: 13 },
					{ label: "Mar", y: 15 },
					{ label: "Apr", y: 15 },
					{ label: "May", y: 15 },
					{ label: "Jun", y: 15 },
					{ label: "Jul", y: 16 },
					{ label: "Aug", y: 17 },
					{ label: "Sept", y: 17 },
					{ label: "Oct", y: 18 },
					{ label: "Nov", y: 19 },
					{ label: "Dec", y: 20 },
			]
			},
			{
				type: "stackedColumn",
				name: "IT",
				showInLegend: true,
				yValueFormatString: "#,###k",
				dataPoints: [
					{ label: "Jan", y: 14 },
					{ label: "Feb", y: 8 },
					{ label: "Mar", y: 6 },
					{ label: "Apr", y: 6 },
					{ label: "May", y: 5 },
					{ label: "Jun", y: 5 },
					{ label: "Jul", y: 6 },
					{ label: "Aug", y: 3 },
					{ label: "Sept", y: 9 },
					{ label: "Oct", y: 5 },
					{ label: "Nov", y: 8 },
					{ label: "Dec", y: 2 },
				]
			}]
		}
		return (
		<div>
			<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 App;

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: canvasjs.com

Tags: javascript react-charts

Link to this answer
Share Copy Link

Contributed on Mar 24 2024

Vinay Vishwakarma

0 Answers Avg Quality 2/10

react charts

Contents

More Related Answers

react charts

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.