Use of context clear to clear existing data from previous bar chart

March 24, 2022

I saw a codepen demo at here. When you click on the first button and then click on the second button,the data will change nicely, however, when you hover your mouse randomly on the bar charts at here, the value changes to the first value instead of the second set of values. How do I solve this issue? I have tried using ctx.clear()

function clearrr(){
    ctx.clear();
}

>Solution :

You create a new chart object every time you click one of the buttons. That means that all the chart eventhandlers stay mounted.

You can either kill the previous chart to remove the chart eventhandlers by calling myChart.destroy() before each update. Or, which would be better, just change the values of the existing chart when clicking one of the buttons:

let data_set_arr = [];
let data_arrayy = [];

// added chart variable here, to keep track of the chart object
let chart = null;

function trig_data() {
  data_arrayy = [100, 50, 60, 80, 70];
  data_set_arr = ["meow", "gs", "dada", "bab", "Dgg"];
}

function trig_data_2() {
  data_arrayy = [10, 10, 60, 20, 90];
  data_set_arr = ["data", "cam", "bell", "bob", "Dog"];
}

function this_button() {
  trig_data()
  bar_charty()
}

function this_button_2() {
  trig_data_2()
  bar_charty()
}

function clearrr() {
  ctx.clear();
}

function bar_charty() {

  var ctx = document.getElementById('myChart').getContext("2d");

  var barStroke = ctx.createLinearGradient(700, 0, 120, 0);
  barStroke.addColorStop(0, 'rgba(0, 255, 188, 0.6)');
  barStroke.addColorStop(1, 'rgba(0, 205, 194, 0.6)');

  var barFill = ctx.createLinearGradient(700, 0, 120, 0);
  barFill.addColorStop(0, "rgba(0, 255, 188, 0.6)");
  barFill.addColorStop(1, "rgba(0, 205, 194, 0.6)");

  var barFillHover = ctx.createLinearGradient(700, 0, 120, 0);
  barFillHover.addColorStop(0, "rgba(0, 255, 188, 0.8)");
  barFillHover.addColorStop(1, "rgba(0, 205, 194, 0.6)");

  // only create a chart if none exists
  if (!chart) {
    chart = new Chart(ctx, {
      type: 'horizontalBar',
      data: {
        labels: data_set_arr,
        datasets: [{
          label: "Data",
          borderColor: barStroke,
          borderWidth: 1,
          fill: true,
          backgroundColor: barFill,
          hoverBackgroundColor: barFillHover,
          data: data_arrayy
        }]
      },
      options: {
        animation: {
          easing: "easeOutQuart"
        },
        legend: {
          position: "bottom",
          display: false
        },
        scales: {
          yAxes: [{
            ticks: {
              fontColor: "#fafafa",
              fontStyle: "bold",
              beginAtZero: true,
              padding: 15,
              //display: false - remove this and commenting to display: false
            },
            gridLines: {
              drawTicks: false,
              display: false,
              color: "transparent",
              zeroLineColor: "transparent"
            }
          }],
          xAxes: [{
            gridLines: {
              display: false,
              color: "transparent",
              zeroLineColor: "transparent"
            },
            ticks: {
              padding: 15,
              beginAtZero: true,
              fontColor: "#fafafa",
              fontStyle: "bold",
              maxTicksLimit: 20,
              //display: false - remove this and commenting to display: false
            }
          }]
        }
      }
    });

  } else {
    // do not create a new chart just change the labels and values, and then update
    chart.data.labels = data_set_arr;
    chart.data.datasets[0].data = data_arrayy;
    chart.update();
  }
}

* {
  box-sizing: border-box;
}

*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  margin: 0 auto;
  font-size: 21px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
  overflow: hidden;
  background: #fafafa;
}

a {
  text-decoration: none;
  color: #212121;
  transition: 0.3s ease;
}

a:hover {
  color: #00ffbc;
  transition: 0.3s ease;
}

.view-window {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.screen {
  position: relative;
  width: 100vw;
  height: 100vh;
  border: 0;
  padding: 60px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: #212121;
  color: #fafafa;
  overflow: hidden;
}

svg {
  display: block;
  width: 100%;
  height: 100%;
}

canvas {
  background: #212121;
  width: 100% !important;
  max-height: 100% !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<!--Base Template-->
<button onclick="this_button()">First</button>
<button onclick="this_button_2()">Second</button>

<section class="view-window">
  <div class="screen">
    <canvas id="myChart"></canvas>
  </div>
</section>