Options object not working

[Pau1fitz]

Everything is set up and the bar chart is showing, however the options are not having any effect on the chart.

I am consuming react-chart js from a cdn

I am including the following files:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
<script src="https://fb.me/react-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-chartjs/0.8.0/react-chartjs.min.js"</script>

and here is my js code

var LineChart = window['react-chartjs'].Bar;

var NewGraph = React.createClass({
  render: function() {
    var chartData =  {
        labels: ["One", "Two", "Three"],
        datasets: [{
                fillColor: "rgba(265,265,265,1)",
                backgroundColor: "rgba(265,265,265,1)",
                highlightFill: "rgba(265,265,265,1)",
                highlightStroke: "rgba(265,265,265,1)",
                data: goals
            },
            {
                fillColor: "rgba(232,28,79, 0.9)",
                backgroundColor: "rgba(232,28,79, 0.9)",
                highlightFill: "rgba(232,28,79, 0.9)",
                highlightStroke: "rgba(232,28,79, 0.9)",
                data: predictions
            }]
    };

    var chartOptions: { 
        responsive: false,
        scales: {
            xAxes: [{
                stacked: true,
            }],

            yAxes: [{
                stacked: true,
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }

    return <LineChart data={chartData} options={chartOptions} width="600" height="250"/>
  }
});

Can anyone spot anything that I have done wrong? I have also noticed that the label in the datasets object are not showing. My guess is that is down to the version of Chart JS

[janakact]

I have a similar problem too.

[tsnolan23]

I'm also experiencing the same issue. ChartsJs v1.1.1 React ChartJs v0.8.0

[janakact]

@tsnolan23 Check this out https://github.com/reactjs/react-chartjs/issues/134 Switching to chartJs v2 solved the problem.

[zacharybrady]

Anyone able to solve this? Switching to v2 did nothing for me.

[zacharybrady]

Actually, switch to v2 broke my project and now that I'm trying to switch back the charts aren't appearing.

[tsnolan23]

Switching to v2 did nothing for me either, I just got more errors with that. I created my own simple Chart component using the ChartJS library to see if anything changes here.

[tsnolan23]

@zacharybrady If you look at the docs for ChartJS, they actually note to different React libraries:

http://www.chartjs.org/docs/#notes-popular-extensions

Maybe one of those could help you.

[zacharybrady]

@tsnolan23 Unfortunately I'm getting the same error which seems to be something between ChartJS2 and either Webpack or Babel.

[zacharybrady]

Also to note. I'm using both a Doughnut Chart and a Bar Graph. Options work perfectly for the doughnut chart but not for the bar graph.

[nikcub]

I switched to https://github.com/gor181/react-chartjs-2 and solved all my issues - both options not being picked up and charts not being resized. If I had more time i'd investigate what was going on.

[PashaKoval]

I had the same problem, but after switching into chartjs v.2 everything work fine, try this commands: npm install --save chart.js@^2 react react-dom npm install -S react-chartjs@git://github.com/reactjs/react-chartjs.git#chartjs-v2

[gazofnaz]

v1.1.1 has a completely different syntax for setting the options: https://github.com/chartjs/Chart.js/blob/v1.1.1/docs/01-Line-Chart.md

That's why what is posted is not working.

[tomav]

@nikcub and @PashaKoval worked for me. Thanks guys.

[Jareechang]

closing issue.

[rfarney3]

You have to pass the options object in just as you would pass the data. For example, I have

`const data = { labels: ["Anger", "Joy", "Fear", "Surprise", "Sadness"],

    datasets: [{
      label: "New York Times",
      fill: false,
      lineTension: 0.1,
      backgroundColor: "black",
      borderColor: "black",
      data: [this.getEmotionByStation("anger", "New York Times"), this.getEmotionByStation("joy", "New York Times"), this.getEmotionByStation("fear", "New York Times"), this.getEmotionByStation("surprise", "New York Times"), this.getEmotionByStation("sadness", "New York Times")]
    },
    {
      label: "CNN",
      fill: false,
      lineTension: 0.1,
      backgroundColor: "blue",
      borderColor: "blue",
      data: [this.getEmotionByStation("anger", "Cable News Network"), this.getEmotionByStation("joy", "Cable News Network"), this.getEmotionByStation("fear", "Cable News Network"), this.getEmotionByStation("surprise", "Cable News Network"), this.getEmotionByStation("sadness", "Cable News Network")]
    },
    {
      label: "Fox",
      fill: false,
      lineTension: 0.1,
      backgroundColor: "red",
      borderColor: "red",
      data: [this.getEmotionByStation("anger", "Fox News"), this.getEmotionByStation("joy", "Fox News"), this.getEmotionByStation("fear", "Fox News"), this.getEmotionByStation("surprise", "Fox News"), this.getEmotionByStation("sadness", "Fox News")]
    },
    {
      label: "ABC",
      fill: false,
      lineTension: 0.1,
      backgroundColor: "green",
      borderColor: "green",
      data: [this.getEmotionByStation("anger", "American Broadcasting Corporation"), this.getEmotionByStation("joy", "American Broadcasting Corporation"), this.getEmotionByStation("fear", "American Broadcasting Corporation"), this.getEmotionByStation("surprise", "American Broadcasting Corporation"), this.getEmotionByStation("sadness", "American Broadcasting Corporation")]
    },
    {
      label: "BBC",
      fill: false,
      lineTension: 0.1,
      backgroundColor: "orange",
      borderColor: "orange",
      data: [this.getEmotionByStation("anger", "British Broadcasting Corporation"), this.getEmotionByStation("joy", "British Broadcasting Corporation"), this.getEmotionByStation("fear", "British Broadcasting Corporation"), this.getEmotionByStation("surprise", "British Broadcasting Corporation"), this.getEmotionByStation("sadness", "British Broadcasting Corporation")]
    }
  ],

}`

AAAAAAND I have

const options = { scales: { yAxes: [{ ticks: { beginAtZero: true, fontSize: 16 } }], xAxes: [{ ticks: { beginAtZero: true, fontSize: 16 } }] } }

And I am rendering them by calling

<Line data={data} options={options} />