CODEWITHSUNDEEP
javascriptchartschart.js
Saptam Dev
Saptam Dev

Reputation: 515

How to I fix RTL issue for chart.js?

I'm working on a project status chart. It's working well for LTR direction. But in RTL direction it's not working well. Actually problem with the canvas text. I want to show the text in the chart middle for RTL and LTR both direction.

I want like this: https://ibb.co/7YCr9L7

I can't fix the text direction.

Here is my code:

var projectProgressChart = document.getElementById("chartProgress");

        new Chart(projectProgressChart, {
            type: 'doughnut',
            data: {
                datasets: [{
                        label: 'Complete',
                        percent: 20,
                        backgroundColor: ['#6690F4'],
                        borderWidth: 0
                    }]
            },
            plugins: [{
                    beforeInit: (chart) => {
                        const dataset = chart.data.datasets[0];
                        chart.data.labels = [dataset.label];
                        dataset.data = [dataset.percent, 100 - dataset.percent];
                    }
                },
                {
                    beforeDraw: (chart) => {
                        var width = chart.chart.width,
                                height = chart.chart.height,
                                ctx = chart.chart.ctx;
                        ctx.restore();
                        ctx.font = 1.5 + "em sans-serif";
                        ctx.fillStyle = "#9b9b9b";
                        ctx.textBaseline = "center";
                        var text = chart.data.datasets[0].percent + "%",
                                textX = Math.round((width - ctx.measureText(text).width) / 2),
                                textY = height / 2;
                        ctx.fillText(text, textX, textY);
                        ctx.save();
                    }
                }
            ],
            options: {
                maintainAspectRatio: false,
                cutoutPercentage: 90,
                rotation: Math.PI / 2,
                legend: {
                    display: false
                },
                tooltips: {
                    filter: tooltipItem => tooltipItem.index === 0,
                    callbacks: {
                        afterLabel: function (tooltipItem, data) {
                            var dataset = data['datasets'][0];
                            var percent = Math.round((dataset['data'][tooltipItem['index']] / dataset["_meta"][Object.keys(dataset["_meta"])[0]]['total']) * 100);
                            return '(' + percent + '%)';
                        }
                    }
                }
            }
        });
<html lang="en" dir="rtl">
  <head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  </head>
  <body>
    <canvas id="chartProgress" width="300px" height="200"></canvas>
  </body>
</html>

Please someone help me to fix this.

Thanks in advance.

Upvotes: 1

Views: 704

Answers (1)

user2057925
user2057925

Reputation: 2653

I think the calculation of textX is not correct.

EDIT: codepen: https://codepen.io/stockinail/pen/vYjJbKp

Try with:

textX = width - Math.round((width - ctx.measureText(text).width) / 2),

Upvotes: 1

Related Questions