score:15
i have solved this problem by using ticks callback method and by setting autoskip false. however, i am not using timescale. in callback, you can pass your date and the desired format it will return the formatted date.
below is the screenshot for the same and the working sample code.
[sample-code]
var ctx = document.getelementbyid("chart_hr");
function newdate(day, month) {
return moment().date(day).month(month);
}
var data = {
labels: [newdate(8,8), newdate(10,8), newdate(12,8), newdate(17,8), newdate(21,8), newdate(23,8), newdate(28,8), newdate(1,9), newdate(4,9)],
datasets: [
{
fill: false,
data: [140, 180, 150, 150, 180, 150, 150, 150, 170],
linetension: 0,
},
{
fill: false,
data: [80, 100, 80, 80, 80, 80, 100, 80, 100],
linetension: 0,
}
]
};
var options = {
scales: {
xaxes: [{
ticks: {
autoskip : false,
callback: function(value, index, values) {
return new moment(value).format('dd mmm');
}
},
gridlines : {
display : false,
}
}],
yaxes: [{
ticks: {
min: 50,
max: 190,
stepsize: 10
}
}],
},
};
var mylinechart = new chart(ctx, {
type: 'line',
data: data,
options: options
});
score:1
in order to only show the dates that appear in the dataset, use the distribution
property set to 'series'
. this will result in equal distances between points, removing extraneous gaps. note: this, unfortunately, only works for time series data. if you wish to produce labels for given datapoints for different values or different axis use the answer provided above using autoskip
property and a callback function.
example:
options: {
scales: {
xaxes: [{
type: 'time',
distribution: 'series',
time: {
unit: 'day'
}
}]
}
}
Source: stackoverflow.com
Related Query
- 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)?
- Chart.js: only show labels on x-axis for data points
- Chart JS show multiple data points for the same label
- Line chart plotting multiple points for duplicate data on x and y axis using chart.js
- Chart.js - Hover labels to display data for all data points on x-axis
- Chart.js how to show cursor pointer for labels & legends in line chart
- show label in tooltip but not in x axis for chartjs line chart
- How to show only the data points that have a change in Chartjs?
- Show "No Data" message for Pie chart with no data
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Chartjs: Is it possible to hide the data labels on the axis but show up on the graph on hover?
- How to add labels for only some of the data point?
- Chart JS pass in custom data for points
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- create different labels for different data chart js
- Chart.JS: How can I only display data labels when the bar width is big enough for the text?
- Chart.JS: How can I only display data labels when the doughnut size is big enough for the text?
- How to show tooltip value of all data falling on the same axis in chart js?
- How to show the chartjs bar chart data values labels as text?
- ChartJs(Java) Can I remove only specific gridLines for a Linear Chart withouth removing the labels on xAxis?
- ChartJS/High Charts Radar chart - Different radial axis labels for each category that appear on hover
- How to show tooltip only when data available in chart js?
- Chart Piechart in only show percentage on hover but it shows data and label with percentage both i just want to show percentage only percentage
- Bar chart (chart.js) with only 2 points does not show one of the bars
- How to show tick marks and labels with grid line for the specific one on the X axis with Chart.js?
- Show label for every data point in line chart
- getting additional value fields from data source for dx.chartjs doughnut chart
- Is there any way to show a tooltip for points which are not visible on the chart in Chart.js?
- Chart.js how to make chart only show the most recent data
- Chart js padding isn't working for data labels
More Query from same tag
- Chartjs - show elements in all datasets on hover using bar chart
- How to show both overlapping lines in in chartjs
- Chart.js: different dataset size
- Chart.js Treemap Custom text
- Chart Js Cannot read property 'length' of undefined
- TypeError: CanvasRenderService is not a constructor
- Display image on bar chart.js along with label (chartjs-plugin-datalabels)
- Is there a way to style multiple borders on Doughnut chart with Chart.js library?
- Chart.js boxplot: adding additional reference value?
- Laravel trying to display chart on welcome page
- Disable or hide YAixs of chart in chartJs
- How to use ChartJS object in a click event handler?
- Return values from nested array
- I´m unable to map elements of an array
- how to disable last/max value shown on x axis in chart js?
- using gradient colors in angular-chart.js
- Add a click event to the bar chart of chartjs
- Can't make chart with Chart.js
- Ability to rotate y axis title in chart.js
- Angular Chartjs How to make it reactive to data change?
- Chartjs Doughnut disappears
- Change color according to data in pie chart.js
- Fit all content inside a HTML page designed using bootstrap in the viewable area without need to scroll
- chartjs - How to use differente color if value is lower than previous value?
- How to set default colour for bars in Chart.js
- How can I debug maxTicksLimits in charts.js?
- ChartJS - Returning labels and data from server on different calls
- Append suffix to Chart.js dataset?
- Chart.js V2 ticklines no grid
- Chart.js is not displayed when page loads first time