chartjs / chartjs/Chart.js

Cannot see ticks lines when grid > display = false

Open
#11,414 2 comments 0 reactions 0 assignees View on GitHub
type: bug
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### 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[]) => {
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_

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.