score:22
The Fix
- Destroy the old chart (to remove event listeners and clear the canvas)
- Make a deep copy of the config object
- Change the type of the copy
- Pass the copy instead of the original object.
Here is a working jsfiddle example
Example Overview:
var temp = jQuery.extend(true, {}, config);
temp.type = 'bar'; // The new chart type
myChart = new Chart(ctx, temp);
NOTE: Using version 2.0.1 of Chart.js
Why this works
Chart.js modifies the config object you pass in. Because of that you can not just change 'config.type'. You could go into the modified object and change everything to the type you want, but it is much easier to just save the original config object.
score:0
In ChartJS 3, :
var options = // your options.
var data = { ...myChart.data }; // deep copy of the data
var ctx = document.getElementById('myChart_id').getContext('2d');
myChart.destroy()
/// Modify ctx or data if you need to.
myChart = new Chart(ctx, {
type: chart_type,
data: data
});
Chart.options = options;
myChart.update();
score:0
In chart.js 3.8.0 you con do it like this:
let chart = new Chart(ctx, {
type: "line",
data: {
// ...
},
options: {
// ...
}
});
chart.config.type = "bar";
chart.update();
you can also change data and options this way
chart.js docs on updating: https://www.chartjs.org/docs/latest/developers/updates.html
score:1
The alternate solution can be as simple as creating both the charts in separate Div elements. Then as per your condition just make one visible and hide other in the javascript. This should serve the purpose you may have for changing the chart type for your requirement.
score:1
In ChartJS, the chart type can also be changed easily like chart data. Following example might be helpful
my_chart.type = 'bar';
my_chart.update();
score:2
No need to destroy and re-create, you just have to change the type from the chart's config variable then update the chart.
var chartCfg = {
type: 'pie',
data: data
};
var myChart = new Chart(ctx, chartCfg );
function changeToBar() {
chartCfg.type = "bar";
myChart.update();
}
score:8
Just to follow up that this is now fixed in v.2.1.3, as followed through by https://stackoverflow.com/users/239375/nathan
document.getElementById('changeToLine').onclick = function() {
myChart.destroy();
myChart = new Chart(ctx, {
type: 'line',
data: chartData
});
};
Confirmed fixed in latest version. Check out http://codepen.io/anon/pen/ezJGPB and press the button under the chart to change it from a bar to a line chart.
Source: stackoverflow.com
Related Query
- Chart.js: Dynamic Changing of Chart Type (Line to Bar as Example)
- Changing fontFamily on ChartJS bar chart
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- How to add second Y-axis for Bar and Line chart in Chart.js?
- Chart.js Mixed Bar and Line chart with different scales
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- Changing cursor to pointer on Chart.js bar chart when hover (mousemove) event is disabled?
- Changing x axis labels in Chart.js line chart
- Can Chart.js combines Line Chart and Bar Chart in one canvas
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Line chart is showing under bar in combochart in chartjs
- How to draw Horizontal line on Bar Chart Chartjs
- Extend bar chart on Chart JS 2 into a new type of Chart
- How to show data values in top of bar chart and line chart in chart.js 3
- ChartJS bar chart fixed width for dynamic data sets
- Lift the bar up from the bottom in bar type chart
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- Combo Bar Line Chart with Chart.js
- Chart.js Date and Time Bar Chart Not Rendering - Line Works Though
- Chart.js horizontal line chart or modified horizontal bar chart
- Dynamic line chart with chart.js and PHP
- Line chart doesn't work with type time chart.js
- Chart.js - Horizontal line on Bar chart interferes with tooltip
- Legend not displaying on Line or Bar chart - React-Chartjs-2
- Using two JSON objects to make Chart.JS Bar Chart Dynamic in Typescript / Angular
- Chart.js - draw horizontal line in Bar Chart (type bar)
- Chart.js Bar and Line chart
- ng2Charts/chart.js changing chart type for one is impacting many charts
- ChartJS 2.9.4 can't overlay line data on Horizontal Bar chart
- Changing Chart.js chart type doesn't remove older axis
More Query from same tag
- ChartJS: How to set fixed Y axis max and min
- How to update data from ajax call (chart.js)
- Dynamic rendering of chart with chartjs
- How should i apply date picker in my chart
- Passing an Array from a Flask view to the javascript code of another view
- Removing ChartJS 2 border and shadow from point style legend
- how to send multiple data in chartjs label
- Chart.js isn't able to read elements from php as label
- System.ArgumentException: Column 'COLUMN_NAME' does not belong to table
- chart.js with null data point in dataset
- How do you revert xAxes with Chart.js?
- Chart.js vertical line when hovering and shadow on line
- ChartJS set yAxes "ticks"
- Chart.js drawing line between two points
- How to fix the distance between horizontal points (x-axis) in chartJS
- Chart.js - Bar chart with linear cartesian (numerical) X axis?
- chart.js radar pointLabel options not working
- ChartJS "half donut" chart not displaying properly
- Format Chart.JS Data Element To Be Currency
- How to remove quotations from a dictionary in python
- Laravel & ChartJS
- How to create a Doughnut chart in django admin interface using foreign key field data?
- how to customize tool tip while mouse go over bars on Chart js bar chart
- How to add prefix to legend in ng charts using angular
- Getting "undefined" trying to create a function
- Why do literal arrays work, but not coded arrays?
- Chartjs: how to show only max and min values on y-axis
- chartjs Line chart: scale respect value on x-axis
- converting int to List<double?>, ChartJS Core
- how to populate my chartjs piechart dynamically