0

I'm working with this plugin: How to add text in centre of the doughnut chart using Chart.js?

I adapted it to my needs, but I'm stuck at trying to change the color in a similar way to how I change the text.

Chart.pluginService.register({
    beforeDraw: function(chart) {
        var width = chart.chart.width,
            height = chart.chart.height,
            ctx = chart.chart.ctx;

        ctx.restore();
        var fontSize = (height / 134).toFixed(2);
        ctx.font = fontSize + "em fuenteTitulos";
        ctx.textBaseline = "middle";
        labelFontColor : "#DC1B3A"

        var legendHeight =  chart.legend.height;

        var text = chart.options.centertext,
            textX = Math.round((width - ctx.measureText(text).width) / 2),
            textY = height / 2;

        ctx.fillText(text, textX, textY);
        ctx.save();
    }
});

It is important to mention that I have multiple graphs in the same view and script. The centertext option is given for each different graph and I would like to do the same with the color of each.

aaron
  • 39,695
  • 6
  • 46
  • 102
Rodolfo Martínez
  • 1

1 Answers1

1

You can set the fontcolor with fillstyle:

ctx.fillStyle = 'blue';

Just set it to the color you need similiar to the way you are setting the text, if you defined the color in the option's aswell you could do it like this:

ctx.fillStyle = chart.options.centercolor;

Make sure to remove labelFontColor : "#DC1B3A"from your code.

Shiffty
  • 2,086
  • 2
  • 26
  • 31