How do I add padding on the right of tooltip, but not the left in Chart.js?

Viewed 881

There is an xPadding property in tooltip configuration in Chart.js. It adds padding both on the left and the right of tooltip. How can I add padding only on the right?

I use react-chartjs-2 and have the following JSX code:

<Bar data={data} width={1000} height={500} options={{ layout: { padding: 20 }}} />
1 Answers

This is extracted from chartjs documentation:

"If this value is a number, it is applied to all sides of the chart (left, top, right, bottom). If this value is an object, the left property defines the left padding. Similarly the right, top and bottom properties can also be specified."

let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        layout: {
            padding: {
                left: 50,
                right: 0,
                top: 0,
                bottom: 0
            }
        }
    }
});
Related