CODEWITHSUNDEEP
javascriptchart.js
Enrico
Enrico

Reputation: 6214

How to access all data in a function with ChartJs?

Consider the following code.

var chartData = {
  labels: ["January", "February", "March", "April", "May", "June"],
  datasets: [{
    fillColor: "#79D1CF",
    strokeColor: "#79D1CF",
    data: [60, 80, 81, 56, 55, 40]
  }]
};

var ctx = document.getElementById("myChart1").getContext("2d");
var myLine = new Chart(ctx, {
  type: "line",
  data: chartData,
  showTooltips: false,
  onAnimationComplete: function() {
    var ctx = this.chart.ctx;
    ctx.font = this.scale.font;
    ctx.fillStyle = this.scale.textColor
    ctx.textAlign = "center";
    ctx.textBaseline = "bottom";

    this.datasets.forEach(function(dataset) {
      dataset.points.forEach(function(points) {
        ctx.fillText(points.value, points.x, points.y - 10);
      });
    })
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
<canvas id="myChart1" height="300" width="500"></canvas>

Because I use the function in the onAnimationComplete in different graphs, I like to create a JavaScript file where I collect all the functions and use them. For example

var chart = new Chart(ctx, eval(config));

chart.options.animation.onComplete = function () {
    window["AnimationComplete1"](chart);
}

function AnimationComplete1(chart) {
    var ctx = chart.ctx;
    ctx.textAlign = "center";
    ctx.textBaseline = "bottom";

    chart.data.datasets.forEach(function (dataset) {
        dataset.points.forEach(function (points) {
            ctx.fillText(points.value, points.x, points.y - 10);
        });
    })
}

In this code, the problem is that in the function I don't have access to the point from the dataset from chart.data.datasets. Also, I don't have access to the scale for font and textColor.

Is there a way to access those values from a common function?

Upvotes: 0

Views: 732

Answers (1)

uminder
uminder

Reputation: 26150

The Chart.js animation onComplete callback function must be defined inside the chart options.

options: {
  animation: {
    onComplete: ctx => {
      // do your stuff
    }
  }
}

Please take a look at your amended code below and see how it works.

var chartData = {
  labels: ["January", "February", "March", "April", "May", "June"],
  datasets: [{
    fillColor: "#79D1CF",
    strokeColor: "#79D1CF",
    data: [60, 80, 81, 56, 55, 40]
  }]
};

new Chart('myChart1', {
  type: "line",
  data: chartData,
  options: {
    animation: {
      onComplete: ctx => {
        console.log(ctx.chart.data.datasets);
        console.log(ctx.chart.options.scales.x);
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<canvas id="myChart1" height="300" width="500"></canvas>

Upvotes: 1

Related Questions