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
- Creating Stacked chart.js graph from array
- chartjs custom y axis values, different text for each one
- Line Chart is not setting backgroundColor when created dynamically Chart.js
- how to display table from chart js data in canvas.js using java script .?
- How to convert Json to Array In javascript for chart.js
- Chart.js -- using update() with time scale datasets
- when showing large amount of data graph not displaying from middle
- chartjs-plugin-streaming + chartjs-plugin-zoom
- jQuery convert hex to rgba
- Incorrect time chart Chart.js
- Charts on Admin-on-rest
- Trying to have Doughnut chart with dql result chartjs
- Issue related to the usage of the library Chart.js
- Chart.js render two charts on one page.
- how to display chart data as html table chartjs
- dynamically add canvas for chart.js
- Chartsjs multi-axis, make the scale appear/disappear when the dataset is activated/deactivated
- Partitioning radar graph in chart.js by sector
- How to increase line chart width in ng2-charts?
- How to fix ERROR in node_modules/chart.js/types/animation.d.ts(20,37): error TS1005: ',' expected. in chart.js
- Change background point color at runtime for angular ng2-charts / chartjs
- Label is too long in Doughnut Chart
- Unable to display data in Bar Chart using react-chart-2
- ChartJs DrawBorder() Configuration not working
- Chart.js create line graph using dates in the x-axis that reflect real time intervals (not evenly distributed)
- Chart.js How to make a sample math axis?
- Angular 2 ng2-charts doughnut text in the middle?
- Chart.js flickering
- Chart.js time-based bar chart
- PhantomJS renders blurry Chart.js canvas