메모 겸 영어공부겸
https://canvasjs.com/react-charts/column-chart/
npx create-react-app react-columns-chart
you need cavans.react.js
and canvas.min.js
https://canvasjs.com/react-charts/column-chart/
import React, { Component } from "react";
import CanvasJSReact from "./canvasjs.react.js";
//var CanvasJSReact = require('./canvasjs.react');
var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;
if you want write class code
class App extends Component {
render() {
const options = {
title: {
text: "Basic Column Chart in React",
},
data: [
{
type: "column",
dataPoints: [
{ label: "Apple", y: 10 },
{ label: "Orange", y: 15 },
{ label: "Banana", y: 25 },
{ label: "Mango", y: 30 },
{ label: "Grape", y: 28 },
],
},
],
};
return (
<div>
<CanvasJSChart
options={options}
/* onRef = {ref => this.chart = ref} */
/>
</div>
);
}
}
export default App;