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
- Put the value into the doughnut chart
- Can you add an action to an element within the tooltip in chart.js?
- Using chart.js, how do I align bars instead of centering them when there are only a few bars to display?
- Chart.js legend alignment
- Show count concatenated to labels using chart.js
- How to change color by clicking on the chart bar?
- chartjs doesn't render dates properly
- Difficult displaying data with linechart in chart.js
- Google Charts, HighCharts or ChartJS Dual Axis Gantt Chart and Line Chart Visualization
- How to display labels outside the pie chart border?
- Chart JS: All Values Displayed on x-axis After Callback Conversion
- Using Chart.js onClick function, can you execute code from an undefined or null result?
- Understanding Chart.js and Adding Legends to Pie Charts
- Stacked bars in Charts.js from a JSON list of objects
- How to handle data API from Django Rest Framework in Chart.js
- Chart JS is using 1,2,3 as y values for my points for the second dataset instead of their passed in labels
- Django and chart.js - one bar per 'date' in model
- How to plot a line chart in ChartJS?
- Charts.js tooltip overlapping text on chart
- Change horizontal line chart to vertical line
- Plotting objects in Chart.js
- Adding Multiple value in Tooltips in ChartJS charts
- "Does not provide an export named 'Tooltip'," even though I can output Tooltip
- How to add Canvas tag inside repeater
- Gradient color for each bar in a bar graph using ChartJS
- Chart.JS Can not read property '_meta' of Undefined
- Chart.js: How to set the height of the rows manually
- Error in created hook (Promise/async): "TypeError: Cannot read property 'position' of undefined"
- Charts JS: Doughnut chart and hiding tooltip for specific data index within each dataset
- Chart.js displays bar as overflown even below the x-axis