ChartJS - Issues with positioning and viewing various components of horizontal bar

Question

I have a React HorizontalBar component being used like so:

<div>
    <HorizontalBar data={myData} options={myOptions} height={80} />
</div>

The options supplied are:

{
    title: {
        display: true,
        text: 'My Title',
    },
    tooltips: { enabled: false },
    hover: { mode: null },
    legend: { display: false },
    responsive: true,
    maintainAspectRatio: false,
    layout: {
        padding: {
            left: 10,
            right: 10,
            top: 0,
            bottom: 0,
        },
    },
    animation: {
        duration: 0,
    },
    scales: {
        xAxes: [
            {
                position: 'top',
                gridLines: {
                    display: false,
                },
                ticks: {
                    beginAtZero: false,
                    min: 0,
                    max: 100,
                    sampleSize: 2,
                    callback: function (value: number, index: any, values: any) {
                        if (value == 0 || value == 100) {
                            return value;
                        }
                        return '';
                    },
                },
                stacked: true,
            },
        ],
        yAxes: [{ stacked: true }],
    },
};

Currently, this is what it looks like. I've added a background color on the canvas to show you what is going on:

Several things are wrong here that I would like some help on:

1. I cannot figure out why there is some mysterious padding on the left side of my canvas.
2. I would like to compress the distance between the gradient bar and the title but nothing I've tried in regards to adding padding options to the title attribute seem to work.
3. Finally, there is actually supposed to be a data label that is clipped because the size of the canvas. If I adjust the height attribute of the HorizontalBar to 140, it reveals:

Basically, what I want is that data label to be shown without everything so vertically stretched out (and without the y-axis line that has appeared in the second photo).

I want it to look something like this:

How do I achieve that?

Edit: I figured out the y-axis line display issue. I just have to add gridLines: { display: false } to my yAxes option and that removes it.

Answer 1

• Title has its own padding, defaulting to 10.
• yAxis can be hidden totally to remove the space (display: false).
• tickMarkLength can be set to a negative number for xAxis grid lines to move those labels closer.
• You should add padding to the bottom for the data label.