score:14
Accepted answer
replace your tick's usercallback
function with the following ...
usercallback: function(item, index) {
if (!(index % 4)) return item;
}
basically, you don't need to return any empty string for the label that you wish to hide. if you do not return anything (for the label you don't want), it won't draw any tick (as well as gridline) for that label.
ᴅᴇᴍᴏ
var ctx = document.getelementbyid("mychart").getcontext('2d');
var mychart = new chart(ctx, {
type: 'line',
data: {
labels: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sept'],
datasets: [{
label: 'standard rating',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
backgroundcolor: 'rgba(209, 230, 245, 0.5)',
bordercolor: 'rgba(56, 163, 236, 1)',
borderwidth: 1
}]
},
options: {
responsive: false,
tooltips: {
mode: 'label',
intersect: false
},
scales: {
xaxes: [{
ticks: {
usercallback: function(item, index) {
if (!(index % 4)) return item;
},
autoskip: false
}
}],
yaxes: [{
ticks: {
beginatzero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.5.0/chart.min.js"></script>
<canvas id="mychart" width="350" height="200"></canvas>
Source: stackoverflow.com
Related Query
- Show only nth tick LINE on x-axis for Chart.js diagram
- show label in tooltip but not in x axis for chartjs line chart
- Chart with Time axis only displaying first grid line and tick label (unitStepSize)
- How to show tick marks and labels with grid line for the specific one on the X axis with Chart.js?
- Chart.js how to show cursor pointer for labels & legends in line chart
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- 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)?
- Empty circle - only point strok in line chart for ChartJS
- Chart.js two y axes line chart tooltip value incorrect for 2nd y axis
- How do you set x and y axis and Title for a line chart using charts.js?
- ChartJS Only Show Large Font Size for a Specific Tick
- Chart JS tick options not working for y axis
- how to show only each 15th x-labels in line chart chart.js in angular 6?
- How to start Y Axis Line at 0 from right for negative values in chart js 2?
- Show label for every data point in line chart
- Line chart plotting multiple points for duplicate data on x and y axis using chart.js
- chart js how do I only show just the low/high dots on line chart?
- Using custom dataformat in chart.js for Multi Axis Line Chart
- Chart Js Change Label orientation on x-Axis for Line Charts
- line chart with {x, y} point data displays only 2 values
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Chart.js: only show labels on x-axis for data points
- chartjs show dot point on hover over line chart
- How to add second Y-axis for Bar and Line chart in Chart.js?
- chart.js Line chart with different background colors for each section
- Chart JS - set start of week for x axis time series
- How to display value of only one datapoint in line chart
- Chart looks only grey, does not show the color - Chartjs,discordjs
- Chart JS show multiple data points for the same label
More Query from same tag
- How to customize chart js Bar chart shape?
- Primefaces charts replaced by chartJS?
- Show "No Data" message for Pie chart with no data
- "Process is not defined" with react-chartjs-2 CDN
- ChartJS - PieChart's Label too long and hide the PieChart
- Custom script tag in index.html is removed on each build in Ionic 2 RC.0
- Stacked Group Bar from Chart.js : Can I give each stack group a unique color?
- Ionic2 Angular2: I can't seem to get an ng2-chart to appear in my app
- Beginner using chart.js: having trouble display state full of data into a column chart using variables
- How to filter data for dxChart
- Unable to produce desired UI output for Chartjs tooltips
- Remove Chart.js chart padding
- How to fix the distance between horizontal points (x-axis) in chartJS
- NuxtJS ChartJS Gradient Color doesnt apply
- Custom text in tooltip and legend: ChartJs
- copy object in Chart.js
- ChartJS: Adjust Tooltip with sums in body
- How can I get chart.js to automatically add colours for dynamic labels?
- Side effects from Chartjs for only *some* clients
- How to put labels at 4 points of the day?
- ChartJS change monthly labels as time/date
- custom tooltips with react-chartjs-2 library
- ChartJS create chart Ajax
- chart.js legend not working for pie chart
- How to plot Json data in Chart js
- Chart.js with TypeScript
- Manipulating data point in chart.js external tooltip
- ng2-charts update labels and data
- ChartJS Update Tooltip programmatically in V2
- Chart.js - access yAxes properties