Remove data after adding it (chart.js)

Question

I have an add data function in my bar-chart but I would like to be able to remove this data with onclick. How do I do this?

var canvas = document.getElementById("barChart");
var ctx = canvas.getContext('2d');
// We are only changing the chart type, so let's make that a global variable along with the chart object:
var chartType = 'bar';
var myBarChart;

// Global Options:
Chart.defaults.global.defaultFontColor = 'grey';
Chart.defaults.global.defaultFontSize = 16;

var 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,
  }]
};

// Notice the scaleLabel at the same level as Ticks
var options = {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  },
  title: {
    fontSize: 18,
    display: true,
    text: 'Källa: Globallife.org',
    position: 'bottom'
  }
};


function addData() {
    myBarChart.data.labels[7] ="Ekologisk palmolja";
    myBarChart.data.datasets[0].data[7] = 14;
    myBarChart.update();
}

// We add an init function down here after the chart options are declared.

init();

function init() {
  // Chart declaration:
  myBarChart = new Chart(ctx, {
    type: chartType,
    data: data,
    options: options
  });
}

Answer 1

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>