What's the plan to upgrade to chart.js 2.0?

[RamonBeast]

+1

[flgarrid]

+1

[jbmeslin]

Every body can start a new branch

[RamonBeast]

yep I guess this repo is dead

[austinpray]

Got a PR here: https://github.com/jhudson8/react-chartjs/pull/87

Take the initiative and help test this PR out so we can get it merged.

[austinpray]

Here's the plan:

1. Create a branch to consolidate V2 development (https://github.com/jhudson8/react-chartjs/tree/chartjs-v2)
2. Release current master as 1.0.0. 1.0.0 will accept backports of bug fixes and perhaps react version compatibility updates.
3. Release 2.0.0 and onward as chartjs v2 compatible.

[austinpray]

The faster you guys test https://github.com/jhudson8/react-chartjs/tree/chartjs-v2 the faster this can get consolidated into a 2.0 release

[RamonBeast]

I'd be very happy to help. I'm trying to integrate it into my project and so far I get:

core.js:63Uncaught TypeError: (intermediate value)[chartType] is not a function

I guess I'm using it wrong: I cloned the v2 repo and temporarily replaced it in my node_modules directory, chart.js is updated to version 2.0.0. Can you please point me to what I'm doing wrong so I can make all required tests?

Thanks

[leighghunt]

@RamonBeast I think someone else encountered the same issue - see #102.

Interested to see resolution to this myself.

[ianks]

I noticed that when I upgraded, the fillColor for a line was no longer honored. It is just a default grey. Any insights on this? I can't seem to find and deprecations in the Chart.js upgrade notes.

[ianks]

Another issue, the label in the datasets key does not update in the canvas when it is changed.

EDIT: What I mean by label can be shown in the Line chart. The switches at the top (I suppose they are called legends?), do not correlate with the current label.

[RamonBeast]

@ianks did everything work out of the box after the upgrade? Because I'm still having the same issue as past week. Can I ask you how you've made it work?

[ianks]

@RamonBeast Things worked, but there were also the issues that I described above. Did you make sure to update ChartJS to 2.0.0?

[ianks]

re: my comment in about the label; It seems the label option in the Object in the datasets array is not being updated despite new props being passed in.

[ianks]

I made a PR which addresses some of the issues experiencing: #109

However, many of the options from chart.js v1 are different from v2. It took me a little bit to realize the documentation is now located at a new place: http://nnnick.github.io/Chart.js/docs-v2/

Use the new documentation to help transition.

[dougmolineux]

Hi guys, I appreciate all the help here.

Firstly, after transitioning from Charts.js 1.x, I am getting an error that looks like this: TypeError: Cannot read property 'datasets' of undefined I have upgraded charts.js and I am using the chartjs-v2 branch of this repo. It looks like the URL that @ianks mentioned there isn't working unfortunately.

Not quite sure if what the problem is, but either way I am willing to help test this branch out further :)

Best regards, Doug

[ianks]

@dougmolineux The new docs reflect 2.0

http://www.chartjs.org/docs/

[gor181]

What's the status of v2? Please let me know where the help is required so I can jump in. cheers.

[ianks]

@gor181 please checkout #109 and test it, you can reference it in your package.json like so:

"react-chartjs": "git+https://github.com/ianks/react-chartjs.git#label-fix-v2",

[stevewillard]

Any news on a 2.0 release? I have been using the branch for awhile now, and it seems pretty stable.

[RezaRahmati]

@ianks is this repo still valid? I get an error in npm install, and when I tried to open this url I get Page Not Found Error https://github.com/ianks/react-chartjs

[stevewillard]

@RezaRahmati It got merged into the v2 branch here:

https://github.com/jhudson8/react-chartjs/tree/chartjs-v2

You should be able to npm install jhudson8/react-chartjs#chartjs-v2

[RezaRahmati]

@stevewillard Thanks, it works now

[rublev]

Do I have to install chart.js alongside the chartjs-v2 branch? If so, how do I install 2.0.0 of chartjs? I tried `npm i -D chartjs@2.0.0" but got:

npm ERR! No compatible version found: chartjs@2.0.0
npm ERR! Valid install targets:
npm ERR! 0.3.24, 0.3.23, 0.3.22, 0.3.21, 0.3.20, 0.3.19, 0.3.18, 0.3.17, 0.3.16, 
0.3.15, 0.3.14, 0.3.13, 0.3.12, 0.3.11, 0.3.10, 0.3.9, 0.3.8, 0.3.7, 0.3.6, 0.3.5, 
0.3.4, 0.3.3, 0.3.2, 0.3.1, 0.3.0, 0.2.6, 0.2.5, 0.2.4, 0.2.3, 0.2.2, 0.2.1, 0.2.0, 
0.1.1, 0.0.8, 0.0.7, 0.0.6, 0.0.4, 0.0.3, 0.0.2

EDIT: Nevermind, it's chart.js not chartjs. Somehow got it in my head that I couldn't allow periods in module names.

[ledsun]

The chartjs is a other npm package. Please try npm i -D chart.js

[adrianmcli]

What's the progress on this? v2.1.0 introduced plugins for ChartJS and I would really like to use it. Unfortunately, I've looked around the chartjs-v2 branch of this project and I can't find the version number of ChartJS that it references.

That being said, since the last commit was a while ago, I'm going to assume that this project hasn't caught up to 2.1.x yet. Am I correct?

[ianks]

We may need to consider forking this repo to get it to 2. There doesnt seem to be much interest in the maintainers for getting us up to 2.

[austinpray]

@ianks plenty of interest. Pull requests accepted.

[ianks]

@austinpray should we open a PR for chartjs-v2 branch against master as a way of tracking all the changes/things that need to be done for 2.0? I have been using that branch heavily in production with no issues, and I am sure others have as well. I propose that we get the ball rollings by making a PR and resolving any outstanding issues there.

[ledsun]

I think there is 2 options.

1. Merge the chartjs-v2 branch and publish the v2.0.0-beta npm package, now
2. More test to confirm the chartjs-v2 branch work with the Chart.js v2

I think the 1st option is better.

Reason 1

The package.json of user applications will be more simple.

I do not want to write:

"react-chartjs": "git://github.com/jhudson8/react-chartjs.git#chartjs-v2"

or

"react-chartjs": "git://github.com/jhudson8/react-chartjs.git#c711d75"

If you do not want to update the latest version of the npm repository, you can use beta tag.

Publish Beta Versions of NPM Modules (Example)

Reason 2

Test needs long time.

When the 2nd option is selected, the goal of test should be defined, I think. Because test is endless.

For example, I am writing samples of react-chartjs with the Chart.js v2. ledsun/react-chartjs-example: react-chartjs sample with Chart.js v2 This will not be completed for a while.

Reason 3

The Chart.js is actively developed. v2.2.0-rc.1 is released today. I am afraid of that the chartjs-v2 branch will not completed forever.

[stevewillard]

Agreed. Just merge it in and publish a beta version, otherwise this package will never progress.

[austinpray]

So I am down for:

• 1.0.0: this branch tracks chartjs 1.0.0 and is basically the library as it exists. No breaking changes allowed.
• 2.0.0: this branch tracks chartjs 2.0.0 and is the chartjs-v2 branch. Tries to stay as API compatible as possible with 1.0.0. Maintenance mode. Eventually sunset this.
• 3.0.0: ES6 rewrite @contra and I are working on. Overhaul the repo to make it more testable, fix bugs. This is the version that we continue to support down the road.

[ianks]

My thoughts:

1. Create a branch v0.7.x-stable branched off of current master; support bugfixes, etc. for chart.js 1.0
2. Merge all of chart.js 2.0 relevant things into master
3. Publish a package version of something like 2.0.0-beta1, or something

Questions

how do we want to version things, i.e. do we want to follow chartjs version, or not? Personally, I think we should pick a version number which makes it obvious it does not reflect version of chart.js. like maybe 4.0.0 or something ridiculous, so users do not get confused with react-chartjs versioning vs chartjs versioning.

[ianks]

@austinpray Offtopic: Would you be interested in converting to codebase to Typescript at all? It can be used as an es6 compiler at first, then slowly we can add types to reduce the possibility of introducing bugs. I would be more than willing to use my experience to get the build system working so there are no pain points.

[austinpray]

how do we want to version things, i.e. do we want to follow chartjs version, or not? Personally, I think we should pick a version number which makes it obvious it does not reflect version of chart.js. like maybe 4.0.0 or something ridiculous, so users do not get confused with react-chartjs versioning vs chartjs versioning.

I understand that this could cause a bit of confusion, but ultimately this will work itself out. It's going to boil down to having a table in the readme:

chartjs version	react-chartjs version
1.x	npm install react-chartjs@1.x --save
2.x	npm install react-chartjs --save

when or if chartjs v3 comes out:

chartjs version	react-chartjs version
1.x	npm install react-chartjs@1.x --save
2.x	npm install react-chartjs@5.x --save
3.x	npm install react-chartjs --save

Assuming we are at version 5 when v3 comes out. 1.x, and 5.x should get react compatibility updates and small bugfixes and that's about it.

[merlinstardust]

As part of the upgrade, chartjs should become a dependency of this package. This would prevent someone from installing the wrong version.

What's the current reasoning behind having devs install chartjs separately?

[hassankhan]

Hi, is there any update on releasing version 2? I couldn't get it to work (using the v2 branch) and ended up writing a simple wrapper myself:

import React, { Component, PropTypes } from 'react';
import { Chart as ChartJS } from 'chart.js';

export default class Chart extends Component {

  static propTypes = {
    type    : PropTypes.oneOf(['bar', 'line']).isRequired,
    height  : PropTypes.number,
    width   : PropTypes.number,
    data    : PropTypes.object,
    options : PropTypes.object,
  };

  static defaultProps = {
    options : ChartJS.defaults.global,
  };

  /**
   * Instantiates the component and sets initial state.
   *
   * @param  {object} props
   */
  constructor(props) {
    super(props);
    this.state = {
      chart : null,
    };
  }

  componentDidMount() {
    this.createChart(this.props);
  }

  componentWillUnmount() {
    this.state.chart.destroy();
  }

  createChart(props) {
    this.setState({
      chart : new ChartJS(this.refs.canvas.getContext('2d'), {
        type    : props.type,
        data    : props.data,
        options : props.options,
      }),
    });
  }

  render() {
    const { height, width } = this.props;
    return (<canvas ref="canvas" height={height} width={width} />);
  }
}