react-chartjs-2 icon indicating copy to clipboard operation
react-chartjs-2 copied to clipboard

Custom chart controllers support

Open mrjv opened this issue 7 years ago • 2 comments

It does not seem possible to register and use a new chart controller type:

Chart.controllers.MyType = Chart.DatasetController.extend({

});

since the chart react components have predefined types (doughnut, pie, line, etc.). It would be nice to be able to render a ChartComponent directly and specify the custom type: <ChartComponent type='MyType' ... />

mrjv avatar Feb 22 '17 09:02 mrjv

I'm just starting to spec the solution but here are my untested thoughts you might be able to expand on. From the docs, it should be able to work. I won't know for a few days till I'm able to get back to trying it out but according to the readme regarding accessing the Chart.js instance, you can do the following

import ChartComponent, { Chart } from 'react-chartjs-2';

export class MyBarChart extends React.Component {

componentWillMount() {
	Chart.defaults.myBarChart = Chart.defaults.bar;

        Chart.controllers.myBarChart = Chart.controllers.bar.extend({...});
}

render() {
    return (
      <ChartComponent
        {...this.props}
        ref={ref => this.chart_instance = ref && ref.chart_instance}
// You can do this because of https://github.com/jerairrest/react-chartjs-2/blob/master/src/index.js#L25 where it is checking the Chart.js instance for a controller that matches the type.
        type='myBarChart'
      />
    );
  }

smcguinness avatar Nov 20 '17 21:11 smcguinness

Super cool @smcguinness !

waleedshkt avatar May 13 '19 21:05 waleedshkt