I am using highcharts to graph some datas. I can select two dates and the graph will show the datas between those 2 dates.
I have the following code:
options.xAxis[0] = {
type: 'datetime',
tickInterval: 3600 * 1000, // one hour
tickWidth: 5,
gridLineWidth: '1',
gridLineColor: gridLineColor,
labels: {
align: 'center',
x: -3,
y: 20,
formatter: function() {
return '<b style=\"font-size:120%\">' + Highcharts.dateFormat('%d-%m', this.value) + '<b>' + '<br>' + Highcharts.dateFormat('%l%p', this.value);
}
},
opposite: false
}
My problem is that if I have 1 day, I see all the hours and if I have selected 5 days for example, I see the 5 days on the axis but if I select 3 months, I see all the days within those 3 months. And this is unreadable.
Is it possible to say that you don't want to have more than 10 intervals shown on the axis?
Many thanks,
John.
You have a couple of options:
Set your tickInterval dynamically. Set the interval depending on time frame of your data
use the tickPixlInterval option. This decides on logical tick intervals that fall somewhere close to the pixel value you specify.
http://api.highcharts.com/highcharts#xAxis.tickPixelInterval
Related
I have a column chart created using highcharts , where in I am showing list of student names in a class on x axis and average marks obtained on all the quiz he has taken on the y axis. For example student "abc" had scored 50 and 100 on two tests hence his average is 75. I want 75 to be displayed as value on column chart and on the tool tip i want to display "test 1 - 50","test 2 - 100".So inside series object i am passing in an array of average. Same will be done for other students in class.Help appreciated
You can put the test values as custom properties and refer to them in tooltip's formatter function:
series: [{
type: 'column',
data: [{
y: 75,
tests: [50, 100]
}, {
y: 50,
tests: [50, 50]
}]
}],
tooltip: {
formatter: function() {
var str = '';
this.point.tests.forEach(function(test, i) {
str += '<br>test' + (i + 1) + ' ' + test;
});
return str;
}
}
Live demo: http://jsfiddle.net/BlackLabel/t5f43zwn/
API Reference: https://api.highcharts.com/highcharts/tooltip.formatter
How to smoothly zoom in and out of the chart using buttons?
Below I gave the code approximation of the graph.
(If this is important: I have Data every second.)
var min = chart.xAxis[0].getExtremes().min,
max = chart.xAxis[0].getExtremes().max;
chart.xAxis[0].setExtremes((min + 12 * 2000),(max - 12 * 2000));
Zoom smoothness depends on the amount of rendered points on the chart. I have noticed that if dataGrouping is disabled and points amount is less than 250 animation works fine.
Demo: https://jsfiddle.net/BlackLabel/hj5Lyda7/
var chart = Highcharts.stockChart('container', {
chart: {
animation: true
},
title: {
text: 'AAPL Stock Price'
},
series: [{
name: 'AAPL',
data: data,
dataGrouping: {
enabled: false
}
}]
});
document.getElementById("btn").addEventListener('click', function() {
var min = chart.xAxis[0].getExtremes().min,
max = chart.xAxis[0].getExtremes().max;
chart.xAxis[0].setExtremes((min + 24 * 3600 * 1000), (max - 24 * 3600 * 1000), true, {
duration: 2000
}); //12 hrs on min and 12hrs on max, summarised it is one day.
})
I am afraid that for more points it is impossible to keep this smoothness and displayed range must be changed by using the rangeSelector feature.
Example plunk refereed to below.
I have a line chart where the Y axis is a percentage between 0 and 1. Sometimes my highest percentage is less than 1% sometimes its between 99 and 100%. It never makes sense to have more than 100% displayed on the legend.
The problem is if I set max: 1 and have data that is all below 0.1, the chart looks flat like in the second example. However, If I don't set max and the data is approaching 100%, then y axis will render ticks up to 125%.
How do let the legend autoscale, but cap the max value.
You have this in your y-axis:
yAxis: {
max: 1,
min: 0
}
If you instead go for this, it should be more understandable:
yAxis: {
min: 0,
endOnTick: false
}
To clarify, you had max: 1 and endOnTick: true (default), and according to the API:
If the endOnTick option is true, the max value might be rounded up.
See this updated Plunker for a demonstration.
The same goes for starting at 0%. You could remove min and set startOnTick: false.
I have spline chart, with dateTime xAxis and more than 3k points in each of 2 categories: http://jsfiddle.net/jk171505/dmmhL5ha/7/
Is there a way, other than tickInterval, to prevent overlapping labels on xAxis?
I tried to use tickInterval but this isn't the option, as data points are irregular and amount varies (sometimes it's data for period of 2 weeks, sometimes 2 years):
xAxis: {
type: 'datetime',
categories: ["test1", "test"],
tickInterval: 24 * 3600 * 1000 * 31,
Set tickPixelInterval - bigger than label width, to make sure there is enough space between items JSFiddle.
http://jsfiddle.net/BYeBa/
yAxis: {
min: 0,
max: 75,
title: {
text: ''
}
I am not sure why I cannot set the max value of the y axis in this highchart. I don't want it to go over 75. None of the data I have populate even goes near the value of 75.
Why does it stay at 100?
This is caused by endOnTick. If you set
endOnTick:false
75 will be your max.
See http://jsfiddle.net/kzoon/BYeBa/4/
You can set tickInterval as 25.
http://api.highcharts.com/highcharts#yAxis.tickInterval