Hide axis

[coyotte508]

Hello,

Is it possible to hide an axis while keeping the ticks? Or change an axis' color, ...

It's possibile to hide the axis but it hides the ticks as well:

scales: {
  x: {
    display: false
  }
}

In chart.js 2 it was possible with grid.zeroLineWidth

[LeeLenaleee]

If I understand you correctly you want to use drawOnChartArea: false instead of display: false

[coyotte508]

No, I even set display: false on the grid. I want to remove the line of the axis itself.

The migration guide states: "scales.[x/y]Axes.zeroLine* options of axes were removed. Use scriptable scale options instead". So I tried this but it doesn't do anything:

scales: {
    x: {
        beforeUpdate(axis) {
            axis.ctx.fillStyle = "red";
            axis.ctx.strokeStyle = "red";
            axis.width = 0;
            axis.height = 0;
          },
          beforeFit(axis) {
            axis.ctx.fillStyle = "red";
            axis.ctx.strokeStyle = "red";
            axis.width = 0;
            axis.height = 0;
          },
          beforeSetDimensions(axis) {
            axis.ctx.fillStyle = "red";
            axis.ctx.strokeStyle = "red";
            axis.width = 0;
            axis.height = 0;
          },
          afterSetDimensions(axis) {
            axis.ctx.fillStyle = "red";
            axis.ctx.strokeStyle = "red";
            axis.width = 0;
            axis.height = 0;
          },
    }
}

[kurkle]

that would be drawBorder: false

[stephanstapel]

Are you sure this should still be working with version 4.x?
I tried to hide the y axises with no luck (trying both drawborder and zerolinewidth) in this code:

var stockChart = new Chart(stockChartElement, {
    "type": "line",
    "data": {
        "datasets": [],
        "labels": []
    },
    "options": {
        "responsive": true,
        "maintainAspectRatio": false,
        "scales": {
            "x": {
                "grid": {
                    "display": false
                }
            },
            "y-quantity": {
                "type": "linear",
                "display": true,
                "grid": {
                    "drawBorder": false, /* attempt 1 */
                    "zeroLineWidth": 0 /* attempt 2*/
                },
                "min": 0,
                "ticks": {
                    "precision": 0
                },
                "position": "left"
            },
            "y-price": {
                "type": "linear",
                "display": true,
                "grid": {
                    "drawBorder": false, /* attempt 1 */
                    "drawOnChartArea": false,
                    "zeroLineWidth": 0 /* attempt 2 */
                },
                "min": 0,
                "ticks": {
                    "precision": 0
                },
                "position": "right"
            }
        }
    }
}); ;

with no result:

do you have an idea how to hide the two y axises?

[Udemology]

The answer above was made when Chart.js 3 came out.
What do you want to remove ticks, borders, ticks marks or the entire y scale?
This video breaks it down for each item: https://youtu.be/bArl0X-VI94

[stephanstapel]

@Udemology : how cool, thanks a thousand!