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
- Can i use crosshairs with OHLC/candlestick charts using ChartJS
- Canvas JS using ajax call
- Ionic2: Use chartjs inside ion-segment
- Javascript array not initialized
- How do I hide values past the x-axis in chartjs 2.0?
- How to pass a chart.js chart data object in json from a controller in asp.net mvc
- How to have more controls over the borderColor per arc segment for chart.js pie charts
- How to create a charjs bar graph with many bars?
- How to add chart js legends in ember?
- How do I run Chart.js with Angular 10 SSR / universal?
- Need help adding decimals to yaxis values
- Chartjs force horizontal bar to start from the lowest value
- chartjs 2.7 how to add labels in center of horizontal bar graph
- Timeline on Y axis, with chart.js
- Contrast chart.js datalabels colors with the background
- Chart JS dynamic chart
- Decimal in x-axis
- Object list into chart labels not working
- Chart.js Currency Tooltip
- the graph in the view is not displayed - Chart.js Angularjs
- ChartJS showing old values when mouse over on Doughnut after updating values
- How to add the value for each label to pie legend
- Chart.js and Firebase Ionic App Angular 4
- Dynamically set chart type with Angular Chart?
- Why Chart.js's tooltip appears in wrong position when mouse hover?
- With Chart js, I am trying to color every 7th vertical (x axis) grid line (representing each week beginning visually)
- specify bar width for a single bar
- Type can not be assigned in react-chartjs-2
- How do I use NuGet to install ChartJS?
- How to make data always visible on bars Chart.js