Posted in Uncategorized

Chartjs ctx.rotate and ctx.translate and drawn lines

   February 24, 2021  1 Comment on Chartjs ctx.rotate and ctx.translate and drawn lines

I’m using ChartJS v2,
I already have the text above the bars in my graph would now like to turn them, how can I do this ?

And also it is possible to add a line in a espefico value in the graph ?

Like this:

https://s31.postimg.org/kx1z1v17v/imgpsh_fullsize.png

My simple code to show de value on top of the bar:

animation: {
                    onComplete: function () {
                        var chartInstance = this.chart;
                        var ctx = chartInstance.ctx;
                        ctx.textAlign = "center";
                      ctx.font = "bold 20px Arial";
                      ctx.fillStyle = "white";                            
                        Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
                            var meta = chartInstance.controller.getDatasetMeta(i);
                            Chart.helpers.each(meta.data.forEach(function (bar, index) {
                                ctx.fillText(dataset.data[index], bar._model.x, bar._model.y - 30);
                            }),this)
                        }),this);
                    }
                }

Author: Fantashit

1 thought on “Chartjs ctx.rotate and ctx.translate and drawn lines”

  1. Try this

    animation: {
  onComplete: function () {
    var chartInstance = this.chart;
    var ctx = chartInstance.ctx;
    ctx.textAlign = "center";
    ctx.font = "bold 20px Arial";
    ctx.fillStyle = "white";                            
    Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
      var meta = chartInstance.controller.getDatasetMeta(i);
      Chart.helpers.each(meta.data.forEach(function (bar, index) {
        ctx.save();
        // Translate 0,0 to the point you want the text
        ctx.translate(bar._model.x, bar._model.y - 30);

        // Rotate context by -90 degrees
        ctx.rotate(-0.5 * Math.PI);

        // Draw text
        ctx.fillText(dataset.data[index], 0, 0);
        ctx.restore();
      }),this)
    }),this);
  }
}

Comments are closed.