Options object not working

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

I have a similar problem too.

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

@tsnolan23

@tsnolan23
Check this out #134
Switching to chartJs v2 solved the problem.

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

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

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.

@zacharybrady

@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.

@tsnolan23

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

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.

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.

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

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.

@nikcub

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

closing issue.

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} />

Navigation Menu

Repository navigation

Options object not working #160

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Options object not working #160

Description

Activity

janakact commented on Nov 22, 2016

tsnolan23 commented on Nov 22, 2016

janakact commented on Nov 23, 2016

zacharybrady commented on Dec 2, 2016

zacharybrady commented on Dec 2, 2016

tsnolan23 commented on Dec 2, 2016

tsnolan23 commented on Dec 2, 2016

zacharybrady commented on Dec 2, 2016

zacharybrady commented on Dec 2, 2016

nikcub commented on Dec 6, 2016

pavlo-koval commented on Dec 20, 2016

gazofnaz commented on Feb 12, 2017

tomav commented on May 29, 2017

Jareechang commented on Jan 14, 2018

rfarney3 commented on May 9, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions