score:1
Accepted answer
you should label your data correctly from 1 to 7 and filter the xaxis labels in the callback function.
scales: {
xaxes: [{
ticks: {
beginatzero: true,
callback: function(value, index, values) {
if (index === 0 || index === 1 || index === count - 1) { // count = yournumberofdatavalues
return value
}
}
},
gridlines: {
display: false
},
}]
},
per default the tooltip uses the xaxis label of a point which returns undefined
when there's no xaxis label. you have to get the right label from your label array.
tooltips: {
callbacks: {
title: function(tooltipitem, data) {
return sdata.label[tooltipitem[0].index] // sdata.label is your array with all data labels
}
}
}
complete code and example in this jsbin.
Source: stackoverflow.com
Related Query
- chartjs - don't show all x-axis data points, but show all in tooltips
- show label in tooltip but not in x axis for chartjs line chart
- Chartjs: Is it possible to hide the data labels on the axis but show up on the graph on hover?
- In Chart.js >3.0, on axis of type time, how to show labels and ticks only for existing data points (make labels reflect data)?
- Chartjs not showing all data points
- How to show tooltip value of all data falling on the same axis in chart js?
- Chart.js - Hover labels to display data for all data points on x-axis
- Chart.js: only show labels on x-axis for data points
- ChartJS show gaps in time data
- Chartjs 2 scaling lots of data points
- Chart JS show multiple data points for the same label
- Show data dynamically in line chart - ChartJS
- Chartjs - show elements in all datasets on hover using bar chart
- How to show data values or index labels in ChartJs (Latest Version)
- ChartJS bar not showing up for simple data points
- Chartjs 2.7.3: Set Y data at the correct X position axis
- ChartJs line chart - display permanent icon above some data points with text on hover
- Show all values in Chart js y axis
- Show Data labels on Bar in ChartJS
- How to show only the data points that have a change in Chartjs?
- Add Commas to ChartJS Data Points
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- showing tooltips all the time in chartjs 2.4 not working
- Tooltips showing wrong data in ChartJS
- Missing Tooltip for some data points using chartjs
- How can I achieve displaying data points on chart but Dotted? Chart.js V3.7.0
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Using chartjs v2 to show categorical values on axis instead of numeric
- ChartJS shows date, but not time, when displaying labels in time axis
- Chartjs show labels but not ticks
More Query from same tag
- Show highest value untop of a bars when dataset is stacked (chartjs)
- Links in bar charts (charts.js)
- How to create chart.js vertical bar chat with rounded corners in angular 6?
- Chart JS tooltips diffrent colors for label
- How to convert pandas dataframe to specific json format
- Chart.js Formatting dual axis and labels
- Chartjs bar chart blurry when height is set
- Can't render two charts on the same page from chart.js
- ChartJS - change chart type by changing y-axis Label
- Label is not showing in ChartJS
- chart.js: hide specific ticks in y-axis and hide all x-axis grid line
- Position of the x-axis labels is not in sync with the line chart data points
- How to create float charts with chartjs?
- ChartJs x-axis label to be in dateTime format issue: DD-MMM-YYYY, but displayed as MMM-YYYY-DD
- Stepped line with null values in chart.js
- Prime NG Customise tool tip on Bar Chart
- Remove/Hide (display:none) the graphical chart in small-mobile view - JS chart
- Chart.js label color
- Chart.js 2.x animation onComplete not responding
- How to update data Chart in async way in Angular Chart.js?
- ChartJS: create linear x-axis on bar chart
- ChartJS scatterplot multi-line tooltip, one box
- How to access the Chart object in Javascript DOM?
- How do I use my chart.js line chart with handlebars?
- Commas in Chart.js
- Chart.js add padding to scales
- Chart.js. Values in a big range. The smallest values are not available
- Chart.js v3.2 Change Radar background shape from Polygonal-Triangle to Circular
- Parsing an unnamed JSON array into React component
- How do I connect to a PostgreSQL database on Heroku server and use Chart.js?