score:0
you could format the dates before you add them to your array. that is how i did. i used angularjs
//convert the date to a standard format
var dt = new date(date);
//take only the date and month and push them to your label array
$rootscope.charts.mainchart.labels.push(dt.getdate() + "-" + (dt.getmonth() + 1));
use this array in your chart presentation
score:2
i had a different use case, i want different formats based how long between start and end time of data in graph. i found this to be simplest approach
let xaxes = {
type: "time",
time: {
displayformats: {
hour: "ha"
}
},
display: true,
ticks: {
reverse: true
},
gridlines: { display: false }
}
// if more than two days between start and end of data, set format to show date, not hrs
if ((parseint(cookies.get("epoch_max")) - parseint(cookies.get("epoch_min"))) > (1000 * 60 * 60 * 24 * 2)) {
xaxes.time.displayformats.hour = "mmm d";
}
score:25
as per the chart js documentation page tick configuration section. you can format the value of each tick using the callback function. for example i wanted to change locale of displayed dates to be always german. in the ticks parts of the axis options
ticks: {
callback: function(value) {
return new date(value).tolocaledatestring('de-de', {month:'short', year:'numeric'});
},
},
score:101
just set all the selected time unit's displayformat
to mmm dd
options: {
scales: {
xaxes: [{
type: 'time',
time: {
displayformats: {
'millisecond': 'mmm dd',
'second': 'mmm dd',
'minute': 'mmm dd',
'hour': 'mmm dd',
'day': 'mmm dd',
'week': 'mmm dd',
'month': 'mmm dd',
'quarter': 'mmm dd',
'year': 'mmm dd',
}
...
notice that i've set all the unit's display format to mmm dd
. a better way, if you have control over the range of your data and the chart size, would be force a unit, like so
options: {
scales: {
xaxes: [{
type: 'time',
time: {
unit: 'day',
unitstepsize: 1,
displayformats: {
'day': 'mmm dd'
}
...
fiddle - http://jsfiddle.net/prfd1m8q/
Source: stackoverflow.com
Related Query
- How to format x-axis time scale values in Chart.js v2
- How to prevent first/last bars from being cut off in a chart with time scale
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- How to plot chart from external JSON and format X-AXIS to show time using Chart.JS?
- How to set the xAxes min and max values of time cartesian chart in Chart.js
- How to set custom Y Axis Values (Chart.js v2.8.0) in Chart Bar JS
- chart js - bar chart with time scale on Y axis in Hours and Minutes
- How to set a time scale to a ChartJS chart from JSON?
- I am using chart.js I sent my time values throw my api as timestamp know i need to show them in the chart as date format
- How to use chart.js to plot line chart with x axis as time stamp in seconds
- How to start Y Axis Line at 0 from right for negative values in chart js 2?
- chartjs : how to set custom scale in bar chart
- How to assign a logarithmic scale to y axis in chart.js?
- Chart JS - set start of week for x axis time series
- time series stream, removing am/pm on x axis and 24 hour format
- How to display inline values in a stacked bar chart with Chart.js?
- Chart.js Dynamically Updating Chart with X Axis Time
- How do I change the 'months' language displayed on the date axis in Chart JS?
- Category scale on Y-axis and time on x-axis in bubble chart in Chartjs
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Format Y axis of Chart.JS as Time
- How to set time scale zoom in ChartJS?
- Show all values in Chart js y axis
- How to show thousand in k format for bar values in chart.js
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- How to show data values in top of bar chart and line chart in chart.js 3
- Hovering over chart.js values in Meteor onRendered function causes chart axis shift
- How to pass values to a chart (chart.js / morris.js)
- How to define chart.js time scale date formats
- How to commaize the data values provided to a chart in Chart.JS?
More Query from same tag
- DevExtreme Exporter prints blank page
- data from api not showing in chart.js (angular)
- Data with pair X and Y values
- Multi label tool-tip in Chart.js
- Unable to change default values in chart.js
- Pass Ajax response array to Chart.js
- How to set php data to chart.js for creating graph?
- Chart.js chart not rendering
- Chartjs working with large and small values
- How to Change the Label Strike-Through with light gray on a ChartJS Doughnut?
- Chartisan/Laravel - > "Call to undefined method" error
- How to make labels clickable in angular-chart
- ChartJS charts not generating within tabs
- Why won't this html page run, Devexpress documentation ChartJS
- How to change chart js data on button click
- Why doesn't parsing option work in chartjs?
- ChartJs beforeDraw method not getting called in release build
- ChartJS create chart Ajax
- How to set ticks on axes dynamically with chart.js?
- Bar Graph, chart.js PHP Will Not Load
- native element not defined when ngSwitch condition in canvas element
- How to show text likt this in Chartjs Dougnet chart
- Linear gradient width using percentage (%) instead of pixels (px)
- Bar Chart not displaying when using chart.js
- ChartJS + twig symfony
- Changing Legend Label Position in VueChartjs
- Testing Chart.js Plugin with React and Jest/Enzyme
- ChartJS - Scale x axis labels from single days to multiple months
- How to add datalabels to chartJS on Primefaces
- Why are my two charts repeating the same label?