Cannot see ticks lines when grid > display = false

[d-nistreanu]

Expected behavior

Hi, I cannot see ticks lines when grid lines are hidden. I don't want grid lines to be visible. By the ticks lines I mean I expect to see a perpendicular line to the X-axis where a label is.

 const ref = useCallbackAll((node:HTMLCanvasElement | null) => {
        chartInstance.current.destroy();

        if (node) {
            chartInstance.current = new Chart(node, {
                type: 'bar',
                data: {
                    datasets: getDataSets(
                        {
                            line: lineSeries ?? [],
                            bar: barSeries ?? [],
                            scatter: [],
                            bubble: [],
                            pie: [],
                            doughnut: [],
                            polarArea: [],
                            radar: []
                        }
                    ),
                    labels,
                },
                plugins: getPlugins({ emptyGraphMessage: t('GRAPH_NO_DATA_MESSAGE') }),
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    layout: {
                        padding: {
                            top: 40, // px
                        }
                    },
                    interaction: {
                        intersect: false,
                        mode: 'index',

                    },
                    scales: {
                        x: {
                            stacked: true,
                            grid: {
                                display: false,
                                drawTicks: true,
                                tickLength: 4,
                                tickWidth: 1,
                            },
                            ticks: {
                                display: true,
                                callback(_value, index) {
                                    if (labels.length <= WEEKS_THRESHOLD) {
                                        return labels[index];
                                    }

                                    const date : moment.Moment = moment(labels[index]);
                                    if (date.date() <= DAYS_IN_A_WEEK) {
                                        return toIntlMedMonthFullYear(date.toDate());
                                    }

                                    return '';
                                },
                                minRotation: 0,
                                maxRotation: 0,
                                autoSkip: labels.length <= WEEKS_THRESHOLD,
                                color: colours.colourStaticBlack, // colours.colourNeutral7,
                            },
                        },
                        y: {
                            grid: {
                                display: false,
                            },
                            beginAtZero: true,
                            title: {
                                display: false,
                            },
                        }
                    },
                    plugins: {
                        legend: {
                            display: false, // hide built in legend
                            position: 'top',
                            labels: {
                                color: colours.colourNeutral7,
                                usePointStyle: true,
                                pointStyle: 'circle',
                            }
                        },
                        tooltip: {
                            usePointStyle: true,
                            backgroundColor: colours.colourNeutral7,
                            padding: {
                                top: 8, // px
                                right: 16, // px
                                bottom: 8, // px
                                left: 16 // px
                            },
                            callbacks: {
                                title: (tooltipItems: TooltipItem<keyof ChartTypeRegistry>[]) => {
                                    const currentTitle = tooltipItems[0].label;

                                    return `${t('WEEK')} ${currentTitle.slice(-2)} (${toIntlLongMonthFullYear(moment(currentTitle).toDate())})`;
                                },
                                afterBody: context => (isContractRangeEnabled ? `${t('GAP')}: ${Number(context[2].raw) - Number(context[1].raw)}` : ''),
                            },
                            boxPadding: 8, // px
                            cornerRadius: 10, // px
                            position: 'nearest',
                            intersect: true,
                            caretPadding: 10, // px
                        },

                        // @ts-ignore TODO: Fix
                        customTitle: {
                            y: {
                                display: true,
                                text: t('HOURS'),
                                offsetX: 0, // px
                                offsetY: 20, // px
                                color: colours.colourStaticBlack,
                                font: {
                                    weight: '700',
                                    family: 'Noto IKEA',
                                    size: 12, // px
                                    lineHeight: 0.5 // fraction
                                },
                            },
                        }
                    },
                },
            });
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [barSeries, lineSeries]);

Current behavior

I expect to see ticks even if grid lines are hidden but I don't.

Reproducible sample

www.mmm.ok

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

4.3.0

Browser name and version

No response

Link to your project

No response

[LeeLenaleee]

Currently it is working as intended, the tick line is an extension of the gridline. This is also stated in the docs here where you can configure how far into the scale area it has to extend:

tickLength: Length in pixels that the grid lines will draw into the axis area.

https://www.chartjs.org/docs/master/axes/styling.html#grid-line-configuration.

If you dont want a grid but do want ticklines you will need to use a custom plugin to draw them yourselfs.

[kurkle]

Try display:true, drawOnChartArea:false