Is it possible to define callbacks for events?

[stevewillard]

I'm looking for a react graphing library that allows the user to select points in a line chart, or maybe selecting a single bar in a bar chart. Do you know if it's possible with this library?

[joshhornby]

Take a look at http://www.chartjs.org/docs/#line-chart, if you hover over a point then you can see the data that corresponds to the relevant point yes.

[stevewillard]

Cool, thanks! Was able to cobble together a click handler. Do you also know if it's possible "select" a point and keep it selected until another one is clicked?

[mnishiguchi]

You can do it by setting the global configuration of Chart.js as follows: Chart.defaults.global.tooltipEvents = ["click", "touchstart", "touchmove"]

Now you can hold the selection after each click.

By default, tooltipEvents is set to ["mousemove", "touchstart", "touchmove"]

[DavidWells]

How do the chart global options work in the react component? Chart is undefined in the context of the component.

So the global options overrides don't work.

Chart.defaults.global.scaleFontSize = 0;

How can I set them inside the example?

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

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

Many thanks!

[mnishiguchi]

The global options are not for a specific chart instance. They are set on the global Chart object. So it does not matter whether a chart has already been instantiated or not. Just make sure Chart.js is available in your project then put Chart.defaults.global.scaleFontSize = 0; anywhere. Also, I do not think this is an issue about this library. We should refer to Chart.js documentation since this library seems to be a simple wrapper of Chart.js. http://www.chartjs.org/docs/#getting-started-global-chart-configuration