How can I display full thick label? It always gets cut off and replaced by 3 dots.
I've been trying various options from https://www.chartjs.org/docs/master/axes/index with padding and similar, but I can't find this. Full date data is there.
You are using a previous version of Charts.js. With Charts.js >2.0 axis label should grow as much as needed to display the full date unless you override the label function like done here.
Demo: https://codepen.io/adelriosantiago/pen/wvooQRR?editors=1010
Date format can be changed in options.scales:
xAxes: [{
type: "time",
time: {
unit: 'hour',
unitStepSize: 0.5,
round: 'hour',
tooltipFormat: "h:mm:ss a",
displayFormats: {
hour: 'Y MMMM D, H:M:S A'
}
}
}]
Related
I'm using chart.js to generate a line chart. I want to visualise the data by month, seconds, minutes etc.(change the xAxis accordingly) When I change "month" to "second" the browser crashes.. Almost anything but month works correctly
xAxes: [{
fontColor: 'orange',
type: 'time',
distribution: 'linear',
time: {
unit: 'month',
displayFormats: {
second: 'h:mm:ss a'
}
},
CodePen:
https://codepen.io/anon/pen/oJmrpw
I created a realtime chart that updates about every 10 seconds by adding a new value and removing an old one.
I'm a bit unhappy about the chosen ticks of the time axis. Every 10 Minutes is fine, but I'd prefer values like 15:50,16:00,16:10. I looked around the documentation time axis but did not find anything promising.
My definition of my xAxes looks like:
xAxes: [
{
gridLines: {
display: true
},
type: "time",
time: {
unit: "minute",
unitStepSize: 10,
displayFormats: {
minute: "HH:mm"
}
},
ticks: {
min: 0,
max: this.datapoints.length,
autoSkip: true,
maxTicksLimit: 10
}
}
]
I tried to loop over the dataset and find the 'first pretty time' object and set this object as my ticks.min object. But this did not work.
OK I found it. The property is in the time attribute:
time: {
unit: "minute",
unitStepSize: 10,
displayFormats: {
minute: "HH:mm"
},
min: firstprettyTime, // <- moment js object
},
All praise to this guy's answer.
Im creating a chart with chart.js v2 and I have a good working graph which uses a time scaled axis. Now I want to show whole hours in the axis so I set the option like this:
xAxes: [{
type: 'time',
time: {
unit: 'hour',
unitStepSize: 1,
displayFormats: { 'hour': 'H:mm' }
}
}]
This works good but I have gaps at the beginning and end of the graph.
How can I make it fit like this:
Codepen:
http://codepen.io/WilbertE/pen/wzRmWr
You want to use the min & max attributes of the time property :
options: {
scales: {
xAxes: [{
type: "time",
time: {
min: /* Set your min here .. */,
max: /* .. and your max here*/
}
}]
}
}
I have a problem formatting the horizontal axis in my google timeline chart. The problem is that I have different data sets where the time range can be days or hours or maybe minutes. The timeline chart formats its hAxis on its own but it uses american date format. I want to have the ISO date format (e.g. 22/07/2015) and time like hh:mm. I saw an formating example for the google corechart on the docs: https://developers.google.com/chart/interactive/docs/datesandtimes (last one on page)
I tried to apply it to my problem:
https://jsfiddle.net/ezcxd61m/2/
var options = {
width: 900,
height: 500,
legend: {position: 'none'},
enableInteractivity: false,
chartArea: {
width: '85%'
},
hAxis: {
viewWindow: {
min: new Date(2013, 9, 13),
max: new Date(2015, 0, 3, 1)
},
gridlines: {
count: -1,
units: {
days: {format: ['dd.MM.yyyy']},
hours: {format: ['HH:mm', 'hh']},
minutes: {format: ['HH:mm', ':mm']}
}
},
minorGridlines: {
units: {
days: {format: ['dd.MM.yyyy']},
hours: {format: ['hh:mm:ss', 'hh']},
minutes: {format: ['HH:mm', ':mm']}
}
}
}
};
But it seems that it doesn't work for the timeline chart. Can anyone help me?
Thanks,
Rob
I had a similar issue, starting from your first attempt I guess I managed to get what you were asking for. Just change the hAxis in the options var as follows:
hAxis: {
format: 'dd.MM.yyyy HH:MM'
}
I've applied the changes in the url you provided
https://jsfiddle.net/ezcxd61m/2/
You will need to set the hAxis.format() depending on the thresholds you set.
If this threshold is minutes, set the hAxis one way.
If this threshold is hours, set it another, and if its days, or weeks, or months or years set it a different way.
Just check the threshold condition before writing the chart, and apply it to the options object.
I would like to customize the date aggregate(axis labels) for amCharts, but I couldn't find a provision to do this in amCharts docs. Googling the same just pointed me to the dateFormats documentation.
amCharts provides an option for aggregating date by setting parseDates to true and adding dateFormats as shown below. This option aggregates date by doing some calculation by amCharts itself, let's say 25 days for week aggregation(Jan 5), 65 days for month aggregation(Jan) and so on, but I would like to customize the default date aggregation level.
parseDates: true,
dateFormats: [{
fff: 'period',
format: 'JJ:NN:SS'
}, {
period: 'ss',
format: 'JJ:NN:SS'
}, {
period: 'mm',
format: 'JJ:NN'
}, {
period: 'hh',
format: 'JJ:NN'
}, {
period: 'DD', // day level
format: 'MM/DD/YYYY'
}, {
period: 'WW', // week level
format: 'MM/W/YYYY'
}, {
period: 'MM', // month level
format: 'MMM YYYY'
}, {
period: 'YYYY',
format: 'YYYY'
}]
I would like to change the default day, week, month levels in the following manner.
DAY LEVEL: <= 14 days
WEEK LEVEL: 14 < x <= 91
MONTH LEVEL: 91 < x <= 731
I would like to customize the date aggregation levels in amCharts. How could I do this? Any help would be appreciated. Thanks in advance.
You can't set this so precisely. The next period is chosen when there are too many items in the selected period. You can try adjusting minHorizontalGap value of CategoryAxis: http://docs.amcharts.com/3/javascriptcharts/CategoryAxis#minHorizontalGap (default is 75). If you make it smaller, more items will fit and you'll have more labels.