score:3
you can insert the canvas after the old one, and then remove the old one. the new one will have its position.
daybutton.addeventlistener("click", function() {
function replacecanvas(elem) {
var canvas = document.createelement('canvas'),
newcontext = canvas.getcontext('2d');
// insert the new canvas after the old one
elem.parentnode.insertbefore(canvas, elem.nextsibling);
// remove old canvas. now the new canvas has its position.
elem.parentnode.removechild(elem);
return newcontext;
}
var new_ctx = replacecanvas(document.getelementbyid('graph1'));
mychart = new chart(new_ctx).line(somedata);
});
score:0
while alfonso is technically correct, i would question the performance of this approach. removing and adding a new canvas is going to add overhead and potentially cause unnecessary flicker. it is good practice to get in the habit of reusing dom elements as much as possible.
i would highly recommend clearing the old canvas and then reusing it. if necessary reassign its id
so that other code will not overwrite your new chart.
clearing a canvas can be accomplished quite easily:
Source: stackoverflow.com
Related Query
- Remove Canvas then add new Canvas in same spot
- How to destroy a canvas using Id and add new canvas to the same id
- How to add new data point and remove leftmost data point dynamically in Chartjs
- Update Chart JS data dynamically and add new data, remove old data to create timeline "like" chart
- How to add labels into Chart.js canvas plugin?
- How to add images as labels to Canvas Charts using chart.js
- Chart.js - Multiple Doughnut Charts on same Canvas
- unable to add background color to the canvas using jspdf and chartjs
- How to add ChartJS code in Html2Pdf to view image
- ChartJS add text to canvas in linechart
- chart.js 2.0 add new property to dataset
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- how to add a background that display "no data" on Canvas using ChartJS?
- Add new chart.js when clicking a button, but get 'Cannot read property 'getContext' of null'
- How to add new x axis in chart JS?
- How to add new dataset in line chart of chart.js by iterating over dictionary in JavaScript?
- Ionic using multiple chart.js canvas in the same page
- How do I add different data in my new chart?
- ChartJS remove previous chart when making new one
- React render function preventing creating new canvas element on each time invoked - Charts.js
- Chart.js canvas keeps shifting upwards if I add things below it? (Angular - Chart.JS - NG2Charts)
- Add new line in es6 inside a doughnut chart
- dynamically add canvas for chart.js
- How to remove old chart and append new chart to div using chartjs
- How I can add the predict data and the actual data in the same graph with ChartJS?
- Chart.js doughnut and pie chart at same canvas mixed
- ChartJS, add new dataset
- How can I add new data points to an existing chart with chart.js?
- How to add several labels to the same set of data in chartjs?
- How to remove a vertical line from the canvas of react-chartjs-2?
More Query from same tag
- Setting min and max values chart.js
- ChartJS display tooltip at maximum/minimum value
- How to add data dynamically to primevue Line chart from vuejs3?
- issue with legend boxes in ChartJS
- Chart JS version 3 not showing in pdf for engine wkhtmltopdf
- How to create stacked bar chart using react-chartjs-2?
- How to show labels beside the bar in Char js 2?
- chart.js radar pointLabel options not working
- Vuejs prop does not get updated
- How to show second set of labels to Chart.js doughtnut chart?
- Multiple line labels for chart js
- Y-axis label in chartjs 2.0.0
- Chartjs hide data point labels
- Merge 2 charts into 1 chart using update button (chart.js)
- Chartjs: How to programatically remove (unhighlight or make inactive) all the active points on chart
- Why Primefaces donutChart is not working?
- Problem for display a chart with Chart.js and Angular
- Inserting and Fetching values from mongodb using nodejs and chartjs
- Unable to pass on data from json file to labels and datasets in chart.js
- How we can draw a circle in bar chart
- Chart.js x-axis label duplicating on hover
- ChartJS - rolling twenty minute view
- how to show REALTIME chartjs of specific ID in mysql when click on corresponding marker on googlemap javascript
- Chart.js not drawing with AngularJS
- How to add unused data background to bar in chart js
- ChartJS 3.0 - Number format
- chart.js - Horizontal lines per bar
- How can I move a label left, paint it black, or remove it (Chart.JS)?
- Moving the zerolines in ChartJS scatter chart
- Where do I use chartjs's destroy function?