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.