score:23
just extend the line chart and replace the xlabels you don't want after your initialization
chart.types.line.extend({
name: "linealt",
initialize: function (data) {
chart.types.line.prototype.initialize.apply(this, arguments);
var xlabels = this.scale.xlabels
xlabels.foreach(function (label, i) {
if (i % 2 == 1)
xlabels[i] = '';
})
}
});
var linechartdata = {
labels: ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"],
datasets: [
{
fillcolor: "#79d1cf",
strokecolor: "#79d1cf",
data: [59, 80, 81, 56, 55, 40, 34, 43, 43, 12, 65, 65]
}
]
};
var ctx = document.getelementbyid("mychart").getcontext("2d");
var myline = new chart(ctx).linealt(linechartdata);
fiddle - http://jsfiddle.net/ttz5t3dx/
score:1
at chart options, under xaxes you can specify the maxticklimit property to whatever you like:
xaxes: [{
ticks: {
autoskip:true,
maxtickslimit:3
}
}]
fiddle : https://jsfiddle.net/p63z7zys/1/
score:1
this was one of the trickiest things that i deal with while using chartjs.
i'm going to share my solution: i just played with the chart options. first i will define some properties for my xaxe. note that i'm formatting the label using the callback:
scales: {
xaxes: [{
id: "x-", stacked: false, ticks: {
autoskip: false, callback: (label) => { return label + "test" } }
}
]}
to format the tooltip title i'm going to use callbacks options for the tooltips:
tooltips: {
callbacks: {
title : (tooltipitems, data) => {
var labelindex = tooltipitems[0].index;
var reallabel = data.labels[labelindex];
return reallabel + "tooltip";
}
}
}
using the chart options like that, i'm able to show different content for the x-axis labels and the corresponding tooltip titles:
you can find the full sample here.
hope this helps.
score:3
to extend on potatopeelings answer, we can do:
var xlabels = this.scale.xlabels
var modval = math.ceil( xlabels.length / 10)
xlabels.foreach(function (label, i)
{
if (i % modval != 0)
xlabels[i] = '';
})
to limit the number of labels (in this case 10) so your labels will never be crowded no matter how many data points you have.
score:5
for anyone looking to achieve this on chart js v2 the following will work:
var options = {
scales: {
xaxes: [{
afterticktolabelconversion: function(data){
var xlabels = data.ticks;
xlabels.foreach(function (labels, i) {
if (i % 2 == 1){
xlabels[i] = '';
}
});
}
}]
}
}
then pass the options variable as usual into a:
mylinechart = new chart(ctx, {
type: 'line',
data: data,
options: options
});`
Source: stackoverflow.com
Related Query
- show label in tooltip but not in x axis for chartjs line chart
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Chartjs - Donut Chart label for small values not visible
- Chart.js two y axes line chart tooltip value incorrect for 2nd y axis
- Chartjs backgroundColor for line chart does not appear in Vue app
- Show label for every data point in line chart
- Is there any way to show a tooltip for points which are not visible on the chart in Chart.js?
- Trying to call API and plot a line chart but it does not show
- Chart Js Change Label orientation on x-Axis for Line Charts
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- Chart.js how to show cursor pointer for labels & legends in line chart
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- chartjs show dot point on hover over line chart
- ChartJS Line Graph - Multiple Lines, Show one Value on Tooltip
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Chart JS show multiple data points for the same label
- Show data dynamically in line chart - ChartJS
- Map event position to y axis value in chartjs line chart
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- PrimeNg bar chart how to show a label for the y-axis
- Chart.js line chart tooltip shows wrong label when line doesn't start at first label
- Add a text as tooltip for each point on a line chart
- chartjs - multi axis line chart - cannot read property 'min' of undefined
- Chart.js tooltip not showing on line chart
- annotation line not visible in scatter chart in chartjs
- Minimum value for x Axis doesn't work for horizontal bar chart | ChartJS
- How to draw multiple line on y axis for same x axis in chartjs v2?
- ChartJS shows date, but not time, when displaying labels in time axis
More Query from same tag
- Charts.JS - Too Many Charts? - Loading Issue
- Angular 7 - Labels and Date values
- How to update Chartjs in Reactjs?
- Chart Js reduce text size for label on X axis
- how to create a bar chart with php data variables
- Can't change color line with chart.js
- Different color for line segments in ChartJS
- Chart.js Plugin Not Recognized as Options Property in Angular
- Inserting an array in Chart.JS
- Is it possible with Chart js or which chart Library can provide this type of chart?
- How do you set x and y axis and Title for a line chart using charts.js?
- Vue Chart.js doesn't get initialized in Vue Tab
- Stacked bar chart with rounded corner of bar using Chart.js
- How to install chartjs on laravel 6 via npm
- Automatic resize of chart - AngularChartJS
- (ng2-charts, angular) Doughnut chart not showing up after AOT? (but filltext is working)
- Chart.js after ajax refresh there are two charts in the same container (new and old)
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- Chart.js line chart with area range
- Calling data from outside of Chartjs code
- How do I type string in the tooltip in Chart.js?
- Change color of X and Y axis values in Chart.js
- Chart.js Y-Axis data not rendering
- Chart.js - each dataset value = different axis
- how to show data label on barchart using chart.js in Angular10 project?
- How to set axes' step size in Chart.js 2?
- Ticks callback not displaying strings containing decimal
- Chart isn't updating with Response data (Chart.js 3.2.1, ng2-charts 3.0.0-beta.9)
- Dynamically create dataset objects for multi-line graphing, using pre-defined dataset object arrays (JavaScript / Chart.js)
- Chartjs for Line chart, values on y-axis