reactjs charts implementation

Question

I'm trying to implement a Line chart in my react app. I found this when searching for charts.

https://github.com/reactjs/react-chartjs

I have used this piece of code but it isn't clear how to use chartData and chartOptions

var LineChart = require("react-chartjs").Line;

var MyComponent = React.createClass({
  render: function() {
    return <LineChart data={chartData} options={chartOptions} width="600" height="250"/>
  }
});

How can i declare the chartData and chartOptions inorder to get my Linechart work?

Answer 1

You need to define chartData and chartOptions as objects in your React Component. A sample chartData will look like

For a line Chart

var chartOptions: {
      // Boolean - If we should show the scale at all
    showScale: true,
    // Boolean - Whether to show a dot for each point
    pointDot: true,
    showLines: false,
    title: {
        display: true,
        text: 'Chart.js Bar Chart'
    },
    legend: {
        display: true,
        labels: {
           boxWidth: 50,
           fontSize: 10,
           fontColor: '#bbb',
           padding: 5,
        }
    }

var chartData = {
    labels: [['Sunday', 'Monday'], ['Sunday', 'Tuesday']],
    datasets: [
        {   
            color: "#4D5360",
            highlight: "#616774",
            borderColor: "rgba(179,181,198,1)",
            pointBackgroundColor: "rgba(179,181,198,1)",
            pointBorderColor: "#fff",
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "rgba(179,181,198,1)",
            label: 'Current lag',
            fill: false,
            lineTension: 0.1,
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            scaleOverride: true, scaleStartValue: 0, scaleStepWidth: 1, scaleSteps: 30,
            data: [[5, 8], [3, 11]]
        }
    ]
}

For a barChart

var chartData = {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },

var chartOptions =  {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }

See the docs here for more information on the object properties: