3

I have got this code using react-chartjs. It displays the graph but the options get ignored everytime no matter what I put there. Is there another way you are supposed to add the options into the component?

import React, { PropTypes } from 'react'
var LineChart = require("react-chartjs").Line;

var data = {
  labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
  datasets: [{
    label: 'apples',
    data: [12, 19, 3, 17, 6, 3, 7]
  }]
};

var options = {
  lineTension : 0,
  fill : false,
  showLines : false 
};

const Graph = () => (
  <span>
    <h1>Heart Graph</h1>
    <LineChart  data={data} options={options} width="600" height="250"/>
  </span>
)

export default Graph
user2802557
  • 747
  • 1
  • 9
  • 19
  • According to http://www.chartjs.org/docs/#line-chart-dataset-structure `fill` is an attribute on a dataset, but that didn't work for me either. – kev Mar 21 '17 at 08:15

2 Answers2

1

You're using a "dataset structure" so check out the docs on options for Line Chart Datasets.

They suggest you should send the "options" along with your data object - in this case to the Components data prop.

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            data: ['data1', 'data2'],
            fill: false,
            lineTension: 0.1,
            ...

Alternatively, you can provide a more complex option object with Axis settings to the option prop.

options: {
    scales: {
        xAxes: [{
            type: 'linear',
            position: 'bottom'
        }]
    }
}
Kyle Thomson
  • 26
  • 1
  • 4
0

There is change in Chart.js version 2 to version 3 for scales namespace is options.scales

scales: { y: { min: 0, max: 100, } }, x: { grid: { display: true, } }, we use like this

devloper AK
  • 1