score:1
Accepted answer
your current code is supplying the same data
variable each time you create a chart. below is an example of switching between two completely different charts by providing different configuration options to the chart constructor.
let lineconfig = {
type: 'line',
data: {
labels: ['q', 'w', 'e', 'r', 't', 'y'],
datasets: [{
data: [6, 5, 4, 3, 2, 1]
}]
}
},
barconfig = {
type: 'bar',
data: {
labels: ['a', 's', 'd', 'f', 'g', 'h'],
datasets: [{
data: [10, 20, 30, 40, 50, 60]
}]
}
},
activetype = 'bar', // we'll start with a bar chart.
mychart;
function init(config) {
// create a new chart with the supplied config.
mychart = new chart(document.getelementbyid('chart'), config);
}
// first init as a bar chart.
init(barconfig);
document.getelementbyid('switch').addeventlistener('click', function(e) {
// every time the button is clicked we destroy the existing chart.
mychart.destroy();
if (activetype == 'bar') {
// chart was a bar, init a new line chart.
activetype = 'line';
init(lineconfig);
return;
}
// chart was a line, init a new bar chart.
activetype = 'bar';
init(barconfig);
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.2/chart.min.js"></script>
<canvas id="chart"></canvas>
<button id="switch">switch</button>
Source: stackoverflow.com
Related Query
- How do I add different data in my new chart?
- How can I add new data points to an existing chart with chart.js?
- Using chart js version 3, how to add custom data to external tooltip?
- How to add new data point and remove leftmost data point dynamically in Chartjs
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- 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?
- How to add unused data background to bar in chart js
- How does one add data to a Chart in an ajax call?
- How to add data dynamically to primevue Line chart from vuejs3?
- How to assign different background colors to chart.js pie chart data set?
- How to stop displaying the data values from different data objects on Chart JS 2.x?
- Update Chart JS data dynamically and add new data, remove old data to create timeline "like" chart
- How do I destroy/update Chart Data in this chart.js code example?
- how to add multiple data in chart js dynamically from JSON
- How to add data labels in each bar in stacked bar chart in chart.js?
- How to add percentage after value data in chart
- How to add text inside the doughnut chart using Chart.js?
- How to add an on click event to my Line chart using Chart.js
- How to add an offset to a dataset in Chart js
- How to add second Y-axis for Bar and Line chart in Chart.js?
- How to add text in centre of the doughnut chart using Chart.js?
- chart js tooltip how to control the data that show
- How to add datas to chart js from javascript array itself?
- How to add panning to chart in chartjs?
- Add all data in the tooltip of Chart JS
- How to display data labels outside in pie chart with lines in ionic
- How to add an empty data point to a linechart on Chart.js?
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
- how to add a title to my ng2-charts bar chart
More Query from same tag
- Can't Customize Chart.js
- Chart.js customization, two Y-Axis overlay, chart area padding, odd tick padding
- chart.js time x-axis - start ticks at specific time
- How to sort color segments by value within the 100% stacked bars rather than by value across all the stacked bars in Highcharts or ChartJs
- Getting the postion of the y-axis labels in chartJS
- Undefined values when try to Insert array in component
- Chart.js displays the label in a weird font in IE8
- Replace chartjs data
- react-chartjs error Cannot read property 'Chart' of undefined
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Dynamic dataset from MySQL query with Chart.js
- How to implement chart.js in Angular2
- Who knows why I can't plot my chart properly?
- Tilting the labels of the x axis to some degrees in chart.js
- how can i put a chart in a div with *ngIf
- Chart.js moment locale
- How add the sizes of the slices in the pie chart (at the top) in Chart.js?
- What kind of graph could I use to achieve this with ChartJS (or similar)?
- How to change font size of labeled scales in Chart.js?
- chart.js update is not a function
- Detect if the click is in bar or outside of bar in ChartJS
- chart.js remove on hover effect
- ChartJS hover tooltip colors not showing their correct color
- Chart.js - Setting x-axis based on user input
- Is it possible with Chart js or which chart Library can provide this type of chart?
- Chartjs: How to offset ticks on radarchart?
- Chart.js v3.60 - Add % symbol to the end of the tooltip label on a doughnut chart?
- Chartjs splitting double digit numbers
- ChartJS - Graphic with multiple values on the same date
- how to add FAHRENHEIT symbol in chart js donut chart