Using Chart.js v1.0.2 and 2.0 in the Same Page
First, note the order of your scripts and make sure it won't change (for e.g., if you are using
require.jsor 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>
Then before you start using the global variable
Chartback to the 1.0 version and 2.0 to whatever you want, like so
var Chartv2 = Chart.noConflict();
Chartwherever 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/
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.
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
Set Version2 as the default version
- Using chart.js version 1.0.2 and 2.0 together
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- How to save Chart JS charts as image without black background using blobs and filesaver?
- How to create a gantt chart using Chart.js and populate dates?
- Create Chart using Reactjs Chartjs and axios
- Configure Pie Chart Colors Using Chart.js and PHP
- Using chart js options with react-chartjs-2 and typescript
- Using chart js version 3, how to add custom data to external tooltip?
- How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?
- Grouped Bar Chart from mySQL database using ChartJS and PHP
- How to export a chart in Excel and PDF format using Chart.js
- Text inside Doughnut chart using Chart.js and Angular2, Ionic2
- How to add text inside the doughnut chart using Chart.js version 3.2.1
- How to update a chart using VueJS and ChartJS
- Labels (category type) on left and right of bar chart using chart.js?
- How to plot chart from external JSON and format X-AXIS to show time using Chart.JS?
- Flask Socketio | Update and plot a chart using background tasks created by Flask Executor or ThreadPoolExecutor
- Printing Chart using ngPrint and tc-chartjs
- create Chart using Chartjs and PHP
- how to increase space between legend and chart in chartjs (ng2charts ) using angular
- Chart, X and Y-Axis labels are blurred in horizontal bar chart using chart.js
- Can't Draw Horizontal Line on Graph Using ChartJS Annotation Plugin and Primevue Chart
- How do you set x and y axis and Title for a line chart using charts.js?
- How can I get my Chart.JS bar chart to stack two data values together on each bar, and print a calculated value on each bar?
- Rails dual axis using Chartkick and chart js
- Generate bar chart using chart.js and associative array
- How to remove old chart and append new chart to div using chartjs
- How to plot a line chart which has both the start and points outside the canvas area using Chart.js
- How to show symbols after the label and before the numeric value using chart.js Bar chart in Angular
- Multiple chart on one page using chart.js and Flask app
More Query from same tag
- How to include chart js annotations in ember?
- how to use chartjs graph in a *ngFor loop
- How to make points in chartjs draggable?
- Is it possible to reverse the display order of segments in polar chart?
- How to style a pie chart in chart js? I want to change the border color, border width and give them shadow
- ChartJs - Is is possible to show only tooltip in one dataset?
- How to limit chart JS hover to take only one value from each line chart when zoomed out?
- update chart in chart js without reloading the page
- Draw chart.js as svg
- Datalabels plugin chartjs showing '[object]' instead of value
- Chart.js – how to remove data entries from the tooltip?
- Category scale on Y-axis and time on x-axis in bubble chart in Chartjs
- How to add background color between two lines in yAxis Chartjs
- How to trigger ChartJS legend onClick with out interrupting its normal working
- Create Chart.js pie chart data from PHP
- Meteor / React.js / Chart.js issue
- How to add an image to a slice of a donut chart in chart.js?
- How to change tooltip on Angular Chart.js
- ChartJs how to get from mulitiple dateset which dataset bar is clicked
- Add line from point to x-axis and bold label of him
- Always show last tooltip on all datasets, leave the rest to display on hover? ChartJS
- setting uneven tick stepsize spacing with chart.js
- Set fixed label size for grouped bar chart in angular Chartjs
- wrong rendered bar chart Chart.js
- chart.js - Supplied parameters do not match any signature of call target (angular2)
- Chart.js mixed chart : Lines not starting at zero
- How to remove color label on tool tip?
- how do I make chart.js smaller? (html, chart.js)
- Chart.js multiple doughnut charts above pie chart
- Tilting the labels of the x axis to some degrees in chart.js