score:7
Accepted answer
below is a working example that demonstrates modifying and updating the chart when clicking a button. your adddata
function is a little odd in that it adds data at index 7, but the dataset only has keys 0-5, so this causes an extra blank data point to be inserted at index 6.
in case this isn't what you intended, i added some extra functions (pushdata
and popdata
) to show adding and removing from the end of a dataset as that's a quite common requirement (and therefore documented).
// same as original function; inserts or updates index 7.
function adddata(e) {
mybarchart.data.labels[7] = "ekologisk palmolja";
mybarchart.data.datasets[0].data[7] = 14;
mybarchart.update();
}
// requested function; removes index 7.
function removedata(e) {
mybarchart.data.labels.splice(7, 1);
mybarchart.data.datasets[0].data.splice(7, 1);
mybarchart.update();
}
// example of how to add data point to end of dataset.
function pushdata(e) {
mybarchart.data.labels.push("ekologisk palmolja");
mybarchart.data.datasets[0].data.push(14);
mybarchart.update();
}
// example of how to remove data point from end of dataset.
function popdata(e) {
mybarchart.data.labels.pop();
mybarchart.data.datasets[0].data.pop();
mybarchart.update();
}
// set listeners on buttons
document.getelementbyid('add1').addeventlistener('click', adddata);
document.getelementbyid('remove1').addeventlistener('click', removedata);
document.getelementbyid('add2').addeventlistener('click', pushdata);
document.getelementbyid('remove2').addeventlistener('click', popdata);
chart.defaults.global.defaultfontcolor = 'grey';
chart.defaults.global.defaultfontsize = 16;
let mybarchart = new chart(document.getelementbyid('chart'), {
type: 'bar',
data: {
labels: ["2012", "2013", "2014", "2015", "2016", "2017"],
datasets: [{
label: "miljoner ton",
fill: true,
linetension: 0.1,
backgroundcolor: "rgba(0,255,0,0.4)",
bordercolor: "green", // the main line color
bordercapstyle: 'square',
pointbordercolor: "white",
pointbackgroundcolor: "green",
pointborderwidth: 1,
pointhoverradius: 8,
pointhoverbackgroundcolor: "yellow",
pointhoverbordercolor: "green",
pointhoverborderwidth: 2,
pointradius: 4,
pointhitradius: 10,
data: [56.38, 59.3, 61.81, 58.83, 52.32, 66.86],
spangaps: true
}]
},
options: {
maintainaspectratio: false,
scales: {
yaxes: [{
ticks: {
beginatzero: true
}
}]
},
title: {
fontsize: 18,
display: true,
text: 'källa: globallife.org',
position: 'bottom'
}
}
});
<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="add1">add index 7</button>
<button id="remove1">remove index 7</button>
<button id="add2">add to end</button>
<button id="remove2">remove from end</button>
Source: stackoverflow.com
Related Query
- Remove data after adding it (chart.js)
- ChartJS 2 - Adding data to chart breaks after X number of items added
- ChartJS chart is bugged after adding new data
- chart js with angular2 loading dynamic data only after zoomin
- Charts js and laravel: Render chart after passing in json data
- Adding object data to data structure of chart.js chart does not show any data
- ChartJS chart not scaling after adding values
- Adding data to line chart using addData() method in Chart.js
- Resetting transform: rotate() by removing and appending canvas not showing data after appending and redrawing chart
- VueJS + Chartjs - Chart only renders after code change
- 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?
- Adding new data to empty Chart.js chart does not render new data correctly
- getting additional value fields from data source for dx.chartjs doughnut chart
- Adding condition in ComponentDidMount to display chart data
- How to adding data in loop and display chart dynamically like in live (chart.js & typescript & angular)?
- Created an onclick function to remove data from a line chart in ChartsJs, but getting "Cannot read property 'data' of undefined" error
- Adding additional data to chart
- how to remove old data from Chart js on mouse hover using mvc c#?
- Javascript not populate chart after retrieve json data
- How to add percentage after value data in chart
- Chartjs Bar Chart showing old data when hovering
- Remove the vertical line in the chart js line chart
- Chartjs random colors for each part of pie chart with data dynamically from database
- ChartJS - Draw chart with label by month, data by day
- line chart with {x, y} point data displays only 2 values
- Chart JS data labels getting cut
- Adding trendlines to existing chart Chart.js
- chart js tooltip how to control the data that show
- Chart.js, adding footer to chart
More Query from same tag
- charts labels and data with php arrays
- How to make bootstrap 4 column height the same as row height
- Charts.js rendering issue on page load
- Remove 0's (zeros) from x-axis of bar chart in Chart.js
- Using Chart.js with Pyramid Web Framework
- multiple horizontal bar charts to display in same row
- Callback after line chart rendered
- Remove left and right padding in Chart.js
- ChartJS - Issues with positioning and viewing various components of horizontal bar
- Want to draw data using chartjs in django
- ChartJs - stacked bar chart with groups - how to create second x-axis with stack id
- Additional line in BarChart (Charts.js)
- How to expand the "Y" scale of the data in chart.js?
- Chart.js making this chart more readable / scrollable
- How can I hide a chartjs chart?
- Vertical lines for custom events and notes
- How can I set 3 color to the same chartjs bar?
- Can you set bar thickness to align with the x-axis scale in ChartJS?
- Styling problems with Chart.Js
- Chart.js: How can I manually set Y-axis range?
- Export chart and table both to pdf
- How to read and plot json with Chart.js
- Charts Js Stacked Bar Graph displays no values?
- Different color for line segments in ChartJS
- Chart.js - is there a way to extend an existing scale?
- Creating a diagonal shaded area in chart.js
- Chart.js place y value position and its x-label position relative to the x-value
- Chart.js: bad alignment of label during ajax update
- Charts in Angular js with JSON Object
- Building a 24h visualisation with chartjs