I'm trying to use highcharts' spider chart. No problem to load it.
I have a problem in axis ranges. Some data is between 0-100 and some is 1.000.000-10.000.000. By default, highchart makes that min : 0 and max : 10.000.000 and some data's difference doesn't seem.
Could you help please ?
Thanks
You need a logarithmic chart.
yAxis: {
type: 'logarithmic'
}
Before and After
Related
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 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
We have column chart, but it will display very ugly when it have lot of column, we enable the scrollbar but its not working properly. Please see the below image.
Please help me on,
How to add margin between group of column.
Or any other way to display the column chart with huge amount of data.
jsFiddle :
`http://jsfiddle.net/utq6zjh5/4/`
Try something like this :
xAxis: {
min: 100
},
Fiddle here: http://jsfiddle.net/utq6zjh5/5/
Try setting some max to xAxis that will work,
setting both min and max to the xAxis will make a pericular range of values to be hown and the chart will be scrollable now,
xAxis: {
max: 3 //3 is just a smple, just check which will work in your case
}
updated your fiddle here
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.
I need to output a plot on page, and I'm considering Highstock or Highcharts to implement this. Highstock interface is more preferable due to navigator pane showing the rest of plot after rezooming.
However my plot has numbers in x-asis, but not date/time. Is there any way to use Highstock with numerical x-scale? Or add similar navigator to Highcharts?
Below X Axis formatter can be used with high Stock for displaying numbers in X-Axis:
xAxis: {labels: { formatter: function () {return this.value;}} }
Highstock's only type of xAxis is datetime, so using it with numbers is not an option. (Maybe if you make some tricky formatting actions and define a custom tooltip with the same formatting options it might be possible).
Leaves only Highcharts and there is an example called master-detail chart that could meet your requirements.
Hope that helps.
xAxis: {
type: 'linear' // Other types are "logarithmic", "datetime" and "category"
},