I am trying to use the highstock graph. I want to update the xAxis labels according to the range which is selected from the rangeselector. eg. if it's a 1-year graph, i want the ticks to be at the end of each month with labels as Jan-12,Feb-12 etc.(by default it shows each month as the beginning of that month). And if it's a monthly graph i want the labels to be positioned at each friday ie. at an interval of 7 days.
Is there a way i can dynamically change which labels are displayed on the axis based on the extremes?
You can use tickPositioner (http://api.highcharts.com/highcharts#xAxis.tickPositioner) or formatter to change labels name http://api.highcharts.com/highcharts#xAxis.labels.formatter
Related
I have some list of dates as categories for xAxis.
Example of collection : 2018-01-01, 2018-01-03, 2018-01-10, 2018-01-17, 2018-01-29;
I want to display on chart dates in format MMM yy (Jan 18)
So I've tried to group all this dates by this date format. As result I received only 1 item in collection which is logically. But on chart I saw labels like this
Jan 18, 1, 2, 3, 4
How to "group" values on chart to display only month labels?
Example what I have now https://jsfiddle.net/phwgo4jz/7/
You could use the dateTimeLabelFormats option of xAxis to format the label. Or simply set the type of xAxis to datetime. Highcharts scales the axis and inserts appropriate labels as required.
Here is the highcharts documentation : https://api.highcharts.com/highcharts/xAxis.dateTimeLabelFormats
Also a sample codepen with similar functionality as your requirement. Have a look
https://codepen.io/samuellawrentz/pen/XYVyNR?editors=1010
categories are basically just an information how to display labels and position ticks - the axis still behaves like a "normal" linear axis. Highcharts will fill the axis labels up with subsequent integers if you don't provide categories for all y positions.
You can use xAxis.labels.formatter to filter categories out:
formatter: function() {
return Number.isInteger(this.value) ? '' : this.value;
}
Live demo: https://jsfiddle.net/BlackLabel/ytoj9ng2/
API reference: https://api.highcharts.com/highcharts/xAxis.labels.formatter
I've a highchart which displays categories on x-axis and time on y-axis.This chart does not show complete range for a particular set of dates. I've created a fiddle for the same. jsfiddle.net/kshrrgvo
For the series with name "Remaining" bars are not complete. Moreover, the axis labels does not denote the full range.
My weather station collects every 15 minutes the current temperature. With Highcharts I created a chart to display the last 24h. So I pass all the 96 quarter-hourly values to the chart. This looks not so pretty. Instead I would just display the average of each hour.
Is it possible to display the average value for each hour based on a series of quarter-hourly values and leaving the calculation to Highcharts and not doing it myself?
You can use highstock which allows to use datagrouping.
Need to display area chart in with highstocks for 1 day,1 week,1 month,6 month,1year and 5 years providing the data at once for all the 5 years.But in case of day it is displaying date with time on x-axis which is not required.How can this date be removed as only time is to be displayed (Eg 9 10 11 ....4 5)
Many thanks in advance.
You can use tickPositioner which allows to set tick, dynamically, based on your data and function.
http://api.highcharts.com/highstock#xAxis.tickPositioner
I can't seem to show the series with empty data into my highcharts. I have some check-ins in a graph for each of the 7 weekdays. But when a day doesn't have data, it's hidden. What I would like to do is show the label of the empty serie on the x-axis (print the weekday name). I tried to populate my data with null values, using different options for highcharts, ...
I also can't set the color for the columns, I tried setting it to gray but that doesn't work.
Here's a demo in JSFiddle
You can set min and max for yAxis, instead of minPadding and maxPadding, take a look: http://jsfiddle.net/tgZcc/21/