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>


Related Query