I created a full webpage report with many charts using chart.js version 1.0.2.

Only in a later stage I discovered multiple functionalities missing from version 1.0.2 but available on version 2.0 dev. I tried to use both in my page but just importing the chart.js 2.0 file (<script src="charts2.0.js"></script>) made most of my charts to not work anymore. Is there a way I can locally import chart.js 2.0 just for one place on my page? Is there a smart way to move from chart.js version 1.0.2 to 2.0 dev or to solve my problem is a different way?

I created a full webpage report with many charts using chart.js version 1.0.2.

Only in a later stage I discovered multiple functionalities missing from version 1.0.2 but available on version 2.0 dev. I tried to use both in my page but just importing the chart.js 2.0 file (<script src="charts2.0.js"></script>) made most of my charts to not work anymore. Is there a way I can locally import chart.js 2.0 just for one place on my page? Is there a smart way to move from chart.js version 1.0.2 to 2.0 dev or to solve my problem is a different way?

• javascript
• import
• chart.js

• Usually in this scenario it's better just to adjust all other charts to the latest version, which makes more sense for future development. Otherwise, you can try to import 2.0 and the 2.0 intended charts in a iframe, so that all the charts still appear to be in one page but they live in different scopes as far as browser considers. – woozyking Commented Mar 25, 2016 at 20:26

3 Answers 3

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_ponents/Chart.js/Chart.js"></script> <script src="bower_ponents/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/6nhqbv3v/

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>

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.