I want to decrease the tickinterval of primary y-axes in my dual axes chart so that the columns height could increase. Chart is working well but due to high intervals, columns height is getting small. The data is dynamic and will remain the same as I have used in the example on jsfiddle.
Please see the jsfiddle i have created for this.
`http://jsfiddle.net/mr6dyh94/2/`
You have to set alignTicks property to false. In API documentation we can read:
tickInterval: number
...
If the chart has multiple axes, the alignTicks option may interfere with the tickInterval setting.
chart: {
alignTicks: false
}
Live demo: http://jsfiddle.net/BlackLabel/dcpz592x/
API: https://api.highcharts.com/highcharts/chart.alignTicks
Related
HEATMAP
Take a look at the chart attached. I tried to set properties of legend for heatmap but nothing worked. Is there a way I can set this legend height according to chart height. I was able to change heatmap height but not the legend. Also, how can i reverse the legend numbers order in descending order?
this is what I used to display legend when creating chart, but its not showing legend numbers in descending order, neither does it changes the height to cover full map height.
You need to set proper symbolHeight for legend and disable reversed for color-axis.
colorAxis: {
...,
reversed: false
},
legend: {
...,
symbolHeight: 280
}
Live demo: https://jsfiddle.net/BlackLabel/2r0Lbt6d/
API Reference:
https://api.highcharts.com/highcharts/colorAxis
https://api.highcharts.com/highcharts/legend.symbolHeight
I have a stock price chart with variance along xAxis (its a special chart). I want to plot this variance as histogram.I can draw it successfully but I can't get rid of the space between histogram columns. fiddle here https://jsfiddle.net/Lng1w0my/1/ (click on price series to generate histogram)
I have set
groupPadding: 0,
pointPadding: 0
but doesn't work.
I tried a simpler fiddle https://jsfiddle.net/hpdru52b/1/ And this one works fine.
I can't find what is the difference.
Any help is highly appreciated.
You need to set ordinal option to false:
xAxis: {
ordinal: false
}
Live demo: https://jsfiddle.net/BlackLabel/ush37qox/
API Reference: https://api.highcharts.com/highstock/xAxis
I have Highstock with default data for each year from 2001 to 2009 as shown in below JSFiddle:
JSFiddle
Now on button click event I want to increase the xAxis extreme to year 2020 even though there is no data available.
I am trying to set extreme by following code:
var newDate = new Date(2019, 03, 23).getTime();
chart.xAxis[0].setExtremes(new Date(2000, 1, 1).getTime(), newDate, true);
But its not working.
In the Highcharts API we can read:
ordinal: boolean
In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data periods (e.g. nights or weekends for a stock chart) will not take up space in the chart. Having ordinal: false will show any gaps created by the gapSize setting proportionate to their duration.
In stock charts the X axis is ordinal by default, unless the boost module is used and at least one of the series' data length exceeds the boostThreshold.
Defaults to true.
So, you need to disable the ordinal option:
xAxis: {
ordinal: false
},
Live demo: https://jsfiddle.net/BlackLabel/fzo7ahg0/
API Reference: https://api.highcharts.com/highstock/xAxis.ordinal
I am facing a strange problem with highcharts(highstock) datagrouping. I want to show grouped data in week or month and at the same time zoom the chart to a specific period (I am using chart.yAxis[0].min = ). When the width of the overall chart is high and when I set the the zoom level to a short period (say a few months), data is not grouped to the period I specify.
Refer to the fiddle link below. I have specified datagrouping as 'month' ({units:[['month',[1]]], enabled:true}) and yAxis[0].min as 29 Jul 2010. You will observe that data is not grouped in months.
Now try to reduce the width jsfiddle result panel by dragging the divider. When the size of the result area (or the chart) is reduced, datagrouping starts working.
http://jsfiddle.net/amit657/of1mv8yv/2/
Any idea how can I force datagrouping and at the same zoom the chart to show data for a specific period?
To force data grouping set forced in dataGrouping to true.
Example: http://jsfiddle.net/of1mv8yv/4/
...
dataGrouping: {
units: [
['month', [1]]
],
enabled: true,
forced: true
}
...
I am trying to set my X and Y axes to have set minimums, maximums and intervals. Easy enough according to the docs - and indeed I have had no problem working with Highcharts to date - in fact the complete opposite, it's an awesome, awesome tool. However, when I add errors bars to my line series', it seems to knock out the x-axis - http://jsfiddle.net/Su44W/
Simply changing to series' type to arearange (http://jsfiddle.net/46dsn/1), providing the same data points [x, low, high], the chart now respects my min, max and tickInterval on the x-axis. So this begs the question, is this a bug or and I doing something wrong?
From my understanding the errorbar causes the axis to consider itself part of a "column-like chart". That is, the points on the axis have a span. The result of this is that this piece of code is ran to prevent more ticks than there are points (found on line 7194 of the source):
// In column-like charts, don't cramp in more ticks than there are points (#1943)
if (axis.pointRange) {
axis.tickInterval = mathMax(axis.pointRange, axis.tickInterval);
}
I'm not exactly sure how this solves the problem, but in some way setting the pointRange of the errorbar series causes the axis to use that pointRange for the axis as well. I'm guessing it just uses the maximum point range of all series, or something similar. This means your specified tickInterval will be the "max" in the above mathMax-function. Like this:
{
name: 'Series 1 error bars',
data: [
[4,7.26,7.34],
[12,6.85,7.06],
[26,6.92,7.12]
],
linkedTo: ':previous',
color: "#013879",
zIndex: 0,
whiskerLength: 7,
type: 'errorbar',
pointRange: 0
}
Check this JSFiddle link for pointRange in action.
The negative effect that this will have is that the top and bottom line for your errorbars will have very short width. You can counter this by specifying a pointWidth for the series as well, as in this JSFiddle demonstration.