CODEWITHSUNDEEP
chart.js
Antony
Antony

Reputation: 4340

Move chart x axis label and borders

I have the following code and am trying to achieve 2 things.

  1. I need to hide the main borders of the graph - I've looked up the Gridlines configuration within ChartJS and also examples here in Stack and for some reason my borders remain??

As you'll see from the fiddle, I have used:

"gridlines": { "display": false, "drawBorder": false, "drawTicks": false}

But to no avail

  1. I need to move the dates above the graph not keep them below it. There doesn't seem to be a simple way to do this unless I get into the animation function and start calculating x/y positions. Is there an easier way??

Here is my basic line graph JSfiddle and the settings I've used https://jsfiddle.net/qogx7epL/

Upvotes: 0

Views: 281

Answers (1)

Hleb Alexeew
Hleb Alexeew

Reputation: 36

Change your config object like that to remove plot borders: https://jsfiddle.net/3ko21xaq/

...
options: {
    ...
    scales: {
        yAxes: [{
            gridLines: {
                drawTicks: false,
                display: false
            },
            ...
        }],
        xAxes: [{
            gridLines: {
                drawTicks: false,
                display: false
            },
            ...
        }]
    },
},

To set x-axis to the top may do the trick this options: https://jsfiddle.net/d3s7x2af/

xAxes: [{
    ticks: {
        display: true,
        position: "top", // Not found in documentation((
        mirror: true,
        padding: -400, // Set the height of the plot
    },
}]

More about ticks configuration -> https://www.chartjs.org/docs/latest/axes/cartesian/#tick-configuration

Upvotes: 2

Related Questions