[Chartjs]-Using chart.js version 1.0.2 and 2.0 together

by

4👍

✅

Using Chart.js v1.0.2 and 2.0 in the Same Page

  1. First, note the order of your scripts and make sure it won’t change (for e.g., if you are using require.js or some other asynchronous loader, make one version a dependency of the other, so that order is guaranteed)

    <script src="bower_components/Chart.js/Chart.js"></script>
    <script src="bower_components/Chartjs 2.0.0-beta/Chart.js"></script>

  2. Then before you start using the global variable Chart use noConflict() to set Chart back to the 1.0 version and 2.0 to whatever you want, like so

    var Chartv2 = Chart.noConflict();

  3. Then use Chart wherever you want to use 1.0 and Chartv2 (or whatever name you want to use for that) wherever you want to use 2.0.

    new Chart(ctx1).Line(data);
    new Chartv2(ctx2, config);

If you are migrating from v1 to v2, I would swap the order of the script files, so that Chart is v2.0.

Fiddle – http://jsfiddle.net/6nhqbv3v/

2👍

Because I cannot find Chart.noConflict() in the Version 2, so I use the below solution to solve it. It is just a reference for you, and you can choose which is the default selection by yourself.

Set Version1 as the default version

<script type="text/javascript" src="/v1/Chart.js-master/Chart.js"></script>
<script>
window.ChartV1 = Chart;
</script>
<script type="text/javascript" src="/v2/Chart.js-master/Chart.js"></script>
<script>
window.ChartV2 = Chart;
window.Chart = window.ChartV1;
</script>

Set Version2 as the default version

<script type="text/javascript" src="/v1/Chart.js-master/Chart.js"></script>
<script>
window.ChartV1 = Chart;
</script>
<script type="text/javascript" src="/v2/Chart.js-master/Chart.js"></script>
<script>
window.ChartV2 = Chart;
window.Chart = window.ChartV2;
</script>

0👍

It is unlikely you will be willing to devote the time to modify either version heavily enough to prevent conflicts which will occur from loading both. You can either load one version and rewrite your code to use that version, or load different versions on different pages and separate out your code into those separate pages.

Leave a comment