adding `direction: rtl;` to body in css messes with center alignment

[FLasH3r]

I've tried it with bar graph

body { direction: rtl; }

without body { direction: rtl; }

var graph_data = {
            labels: [200,301,404,500],
            datasets: [
                {
                    data: [67,1,0,0]
                    options: {
                        responsive:false
                    }
                }
            ]
        };
var myBarChart = new Chart(graph_ctx, {
            type: 'bar',
            data: graph_data,
            options: {
                legend: {
                    display: false
                },
                title: {
                    text: "bar graph",
                    display:true
                },
                animation: {
                    duration: 2000,
                },
                plugins: {
                    datalabels: {
                        color:'white',
                        display: function(context) {
                            return context.dataset.data[context.dataIndex] !== 0; // or >= 1 or ...
                        },
                        textShadowColor: 'black',
                        textShadowBlur: 2
                    }
                }
            }

[simonbrunel]

@FLasH3r can you create a codepen that reproduces your issue so it's easier for us to debug?

[simonbrunel]

I have been able to reproduce this issue but I don't have solution yet on how to fix it.

[besufkadmenji]

use textAlign: "center", default is start