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
- Starting a Chart.js Time Scale at 0
- ChartJs: X Axis labels cutting at bottom
- The engine “node” is incompatible with this module when installing React-chartjs-2 Chart.js,
- Building Chart.js master - generated .js gives errors
- How to add labels into Chart.js canvas plugin?
- Displaying two values in tooltip using chart.js
- How do I place 2 <div>s side by side
- LinearGradient doesnt't work on chartJs canvas for Angular
- Chartjs display bug when pushing data to graph
- How to get onClick Event for a Label in ChartJS and React?
- Not able to show data on Chart.js
- Chart.js - Styling Legend
- chartnew.js cannot show chart after durandal project published
- Unable to access list elements in Django Webpage
- How to set start value as “0” in Chart.js Laravel
- Can i use crosshairs with OHLC/candlestick charts using ChartJS
- Displaying ChartJS tooltip on mouseover of bar/line
- Tick label overlaps axis label
- Chart.js loading data colors from PHP
- How to push an array into an Object which is inside of another array?
- How to display data from database into line graph using php and mysql?
- Chart js options not changing chart
- Adjusting the font size and family of extra fillText labels in ChartJS
- Chartjs line graph point hover animation buggy / jumpy
- Using Chart.js on Laravel 5.3
- How do we can use chart.js in angular JS?
- How to add a toggle inside a title of the barchart js
- ChartJS : How to display two "y axis" scales on a chart
- How to show second set of labels to Chart.js doughtnut chart?
- Chart js Bar Time Chart