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
- How do I change axis, title, legend formatting on chartjs template
- How to trigger hover programmatically in chartjs
- Bar chart with min height and zero values - ChartJs
- Angular-chart copied from example not showing up
- My chart.js canvas disappears after hide() function
- Is there a way to create a chart with only a single axis?
- Chart.js create line graph using dates in the x-axis that reflect real time intervals (not evenly distributed)
- ChartJS have xAxes labels match data source
- Change ChartJs axis title dynamically
- Chart.js how to change width of color
- Chart.js - is there a way to extend an existing scale?
- Do not draw line on condition in ChartJS line chart
- Can we use EJS tags with ChartsJS?
- Graph is not displayed
- passing json data to chartjs
- Chart.js Auto Fit Failing
- How using charts.js with JSON?
- Chartjs 2.7.3: Set Y data at the correct X position axis
- How to disable Chart.js Radar Chart point labels
- Is there a way to display legend's data over the chart in chart.js?
- Chart.js doesn't show chart while on flask blueprint
- How to shorten Chart.js label
- react-chartjs-2 tooltip callback not working
- how do i use the numbers i key in from a form as the input data for chartjs
- Chart.js bar chart mouse hovering highlights all the datasets instead of just the selected one
- Is it possible to print to pdf a Canvas with other div elements?
- How to change the chart line or area colors according to the user need?
- Chartjs xAxes gridline html (html in ticks callback)
- How to display the labels in doughnut chart using ng2 charts?
- javascript chart.js remove last point