React-chartjs-2: Custom chart controllers support

Created on 22 Feb 2017  路  2Comments  路  Source: reactchartjs/react-chartjs-2

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' ... />

enhancement help wanted

Most helpful comment

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'
      />
    );
  }

All 2 comments

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'
      />
    );
  }

Super cool @smcguinness !

Was this page helpful?
0 / 5 - 0 ratings

Related issues

nealoke picture nealoke  路  5Comments

alexchoiweb picture alexchoiweb  路  3Comments

flavz27 picture flavz27  路  5Comments

flyingpath picture flyingpath  路  5Comments

Holychung picture Holychung  路  4Comments