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
- Chart JS not reloading in Partial View
- Create Conditional Chart
- chart.js - tooltip callback function ignore hidden datasets when deselecting legend
- Chart.js - Line charts with different colors for each border lines
- Chart.js - show tooltip when hovering on legend
- How to change ChartJS font size with javascript?
- How can I reduce the spacing between my legend and chart proper in my Chart.JS bar chart, and increase it in the graph area?
- Plot bar graph in reactjs
- ng2-charts - bar chart, showing only one color
- chart.js value is two but only one display tooltip
- How to update your django page by looking for new data in the db?
- How to create datasets for all labels for stacked bar in chart.js?
- Chart.JS - show values on top of points
- core.js:4197 ERROR TypeError: chart_js__WEBPACK_IMPORTED_MODULE_2__ is not a constructor
- How to vary the thickness of doughnut chart, using ChartJs.?
- ChartJs - set x-axis ticks at specified/fixed intervals
- chart.js aspect ratio not square
- Two data sets with different time instances on the same ChartJs chart
- Chart.js - Setting max Y axis value and keeping steps correct
- How to update css for doughnut chart with ng2-charts
- Pass custom labels as an array to Chart JS Tool tip
- ChartJS set default axis
- y axis Formatting with Metric prefix 1000=> 1k Chart.js
- Importing chart.js to aurelia causes page errors after bunldling
- Chart.js HTML custom legend issues with doughnut chart
- Resize bars' chart in ReactChartJS
- Chart.js - How to show loading animation before plotting chart
- Chart.js change Color of a Point during runtime
- Edge does not set height on canvas properly
- Chart.js: load new data on click