Customizing y-axis in Highchart.js (stockchart) - javascript

Is it possible to customize the y-axis of my highchart so that every series will start from 100% and not as it is by default from 0% ?
Here is an example for better understanding:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/compare/
Here is the js code for showing the percentages in the y-axis:
plotOptions: {
series: {
compare: 'percent'
}
},


To simply reverse the y-axis, you could use
yAxis: {
reversed: true,
},
http://www.highcharts.com/stock/demo/yaxis-reversed
If you're instead trying to display data starting from 100% and upwards, you could set the minimum value to be 100, like this:
yAxis: {
min: 100
},
http://api.highcharts.com/highstock#yAxis.min

Related

How to get y-axis boundary line using highchart?

I am trying to get y axis to show up in highchart
I can use x-axis plotline to simulate the result, but it has the x-axis protruding over the y-axis
xAxis: {
type: 'datetime',
tickLength: 0,
plotLines: [{
color: '#000000',
width: 1,
value: 1370131200000
}]
},
Note: 1370131200000 is the lowest x value in my series.
Can someone let me know how do I define y-axis properly?

Use yAxis.lineWidth property. By default it equals to 0 and that's why the line is not visible.
API reference:
http://api.highcharts.com/highcharts/yAxis.lineWidth

NVD3 scatter plot tick spacing with only a few values

Why is it that when there are only a few values in an NVD3 scatterplot, the tick spacing spreads out immensely? I would think the ticks should be independent of the number of values, but that doesn't seem to be the case.
Compare this plunker with their example. The only difference is the number of values being plotted, and yet their example shows many ticks, whereas my plunker shows only a few.
How can I cause the ticks to space nicely at all zoom levels when the plot is meagerly populated?
I thought about defining specific tickValues like this:
chart: {
type: 'scatterChart',
// ...
xAxis: {
// ...
tickValues: d3.scale.linear().domain([-100,100]).ticks(500)
},
yAxis: {
// ...
tickValues: d3.scale.linear().domain([-100,100]).ticks(500)
},
zoom: {
enabled: true
}
}
but that only looks decent at certain zoom scales.

There's an option for ticks that I missed, as mentioned by krispo:
chart: {
type: 'scatterChart',
// ...
xAxis: {
// ...
ticks: 10
},
yAxis: {
// ...
ticks: 10
},
zoom: {
enabled: true
}
}
plunker

Making two series point in opposite directions in highcharts

I have a column chart with two series, one of which I want to go down and the other up, like this:
However both of the series have positive y-values, which I can't change, e.g.
blue = [1746181, 1884428, 2089758, 2222362, 2537431, 2507081, 2443179,
2664537, 3556505, 3680231, 3143062, 2721122, 2229181, 2227768,
2176300, 1329968, 836804, 354784, 90569, 28367, 3878];
grey = [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874,
3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638,
1447162, 1005011, 330870, 130632, 21208];
Using highcharts options, is it possible to have a chart like this? The example I used for the screenshot is this jsFiddle if it's useful to anyone, however it has a series with negative values which is not an option for me. Instead my data is more like this fiddle

I would try to use two separate yAxes: http://jsfiddle.net/zares7x9/2/, where one of them is reversed:
yAxis: [{
title: {
text: null
},
top: '5%',
height: '45%',
labels: {
formatter: function () {
return (Math.abs(this.value) / 1000000) + 'M';
}
},
min: 0,
max: 4000000
}, {
title: {
text: null
},
labels: {
formatter: function () {
return (Math.abs(this.value) / 1000000) + 'M';
}
},
offset: 0,
showFirstLabel: false, // hide 0-value
reversed: true, //reverse
top: '50%',
height: '45%',
min: 0,
max: 4000000
}],
Setting top and height allows you to render axes like one. Note, that you need to set for one of the series yAxis: 1, to inform Highcharts which series belongs to which axis.

Tick and label for every xAxis Unit in Highcharts Chart

I have a chart like the one in this fiddle: http://jsfiddle.net/h9Bqj/
As shown in the image there is no tick for "3" and "5" on the xAxis as well as no label. I am not able to figure out how to show a tick for every xAxis.
The [...]
xAxis: {
labels: {
step: 1
},
tickInterval: 1
}
options did not work for me.
How would I get a tick and a label for every increment?

Set tickInterval as 1, as you have, and add pointInterval as 1.
http://api.highcharts.com/highcharts#plotOptions.series.pointInterval
http://jsfiddle.net/h9Bqj/1/

Actually I figured it out by myself.
Setting pointRange via plotOptions: {
column: {
stacking: 'normal',
pointRange: 1
}
}, in the options or in the series does the trick.
See: http://jsfiddle.net/DZbyp/1/

How to create a line to show threshold in bar graph

I am using flot to create bar charts like
I need to specify a threshold like a line at 750(y axis) for example, to show the limit...
there is one jquery.flot.threshold.js file in flot package, but i dont know how to use it on bar charts.How to do it ?

Seems there was some issues with using the threshold plugin with the current flot release version. If you just want to mark a threshold, it might be easier to use the grid markings option:
$.plot($("#placeholder"), [ d1, d2, d3 ], {
series: {
stack: true,
bars: { show: true, barWidth: 0.6 }
},
grid: {
markings: [ { xaxis: { from: 0, to: 12 }, yaxis: { from: 0, to: 20 }, color: "#6D7B8D" }]
}
});
Produces (fiddle here):

Categories