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
window.chartv1 = chart;
window.chartv2 = chart;
window.chart = window.chartv1;
set version2 as the default version
window.chartv1 = chart;
window.chartv2 = chart;
window.chart = window.chartv2;
- 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 perform an histogram with the following dictionary?
- How to decrease bottom width of triangle using line chart in chartJs?
- Angular .subscribe executes at the end after the ngOnInit
- reset the zoom to the initial in chart.js?
- How can I get a point to be drown over the line?
- increase the gap between y-axis and first x-axis value chart.js
- Chart for Real time data with duplicate x axis
- Chartjs 2.5.0 -> Labels below the chart
- How to show lables just outside the the doughnut chart in Chartjs?
- Plot time on Y axis
- using ajax populate dynamic piechart from chartjs
- ChartJS tooltip position / placement
- Changing style of individual point Chart.js
- Styling Bars and Lines with Chart.js
- add info for points in line chart (js)
- ChartJS: How to get labels, legend, title to show up?
- Chartjs : showLine depending on value
- How to add an event when clicking a bubble in bubble chart?
- get JSON data from function to give value to Chart JS
- Importing data from Model into a View gives me an error I cannot solve
- protoype js 1.0.6 is conflicting with chart js
- How to add image to chart.js tooltip?
- chart.js label with if statement
- Chart.js doughnut chart isn't showing tooltip when you hover over the left/right of the doughnut
- chart.js reduce file size
- How can I datalabels and Sum display in the same time on a stacked bar
- How to disable chartjs legendclick
- use navigator clipboard to store image/png from canvas blob
- Chart.js | Trouble refreshing line chart with "setInterval"
- Charts.js how to have 2 different size y-axis