We Keep Coding

Set HighChart yAxis's min max to a specific series only

I have a stock price candlestick series And a line series that share yAxis with the candlestick series. By default, the API automatically set chart's yAxis range to the min/max of two series's min/max(candlestick series, line series)
But I want to show the candlestick series more importantly than line chart. So, chart's yAxis min/max should be limited only the candlestick series even if it cut the line series off.
And the yAxis min/max should be adjusted when the chart is scrolled dynamically.
How can I do that?
jsfiddle simple code
var chartData = [
[1473687000000, 102.65, 105.72, 102.53, 105.44],
[1473773400000, 107.51, 108.79, 107.24, 107.95],
[1473859800000, 108.73, 113.03, 108.6, 111.77],
[1473946200000, 113.86, 115.73, 113.49, 115.57]
];
var avgData = [
[1473687000000, 250],
[1473773400000, 300],
[1473859800000, 280],
[1473946200000, 290]
];
$(function() {
Highcharts.stockChart('container', {
// title: {text: '---'},
rangeSelector: {
buttons: [
// { type: 'hour', count: 1, text: '1h' },
{ type: 'day', count: 1, text: '1d' },
// { type: 'all', count: 1, text: 'All' }
],
selected: 1,
//inputEnabled: true
},
xAxis: [{
type: 'datetime',
}],
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {text: 'OHLC'},
height: '100%',
lineWidth: 2,
resize: {
enabled: true
}
}],
plotOptions: {
candlestick: {
downColor: 'blue',
upColor: 'red',
dataGrouping: {
enabled: false,
}
}
},
series: [{
name: 'ohlc',
type: 'candlestick',
data: chartData,
}, {
name: 'avg',
type: 'line',
data: avgData,
}]
});
});
dic#container {height: 100%; width: 100%;}
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//code.highcharts.com/stock/highstock.js"></script>
<script src="//code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="//code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container"></div>

In 'afterDrawChartBox' event, you can use setExtremes method with min and max values from candlestick series:
Highcharts.addEvent(Highcharts.Chart, 'afterDrawChartBox', function(e) {
var candlestick = this.series[0];
this.yAxis[0].setExtremes(candlestick.dataMin, candlestick.dataMax, true, false);
});
Live demo: https://jsfiddle.net/BlackLabel/520km1wv/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

Not all categories are being shown in bar highchart

I am trying to create one highchart with lots of data. Below is the code i have written to create it. But somehow on the X-Axis not all the categories are being shown. Attached is the Fiddle
JsFiddle Link
$(function() {
Highcharts.chart('containerSDRangeDOJ', {
chart: {
type: 'bar',
marginLeft: 150,
marginBotton: 50
},
legend: {
y: -20
},
title: {
text: "Top Source-Destination",
align: "center"
},
subtitle: {
text: 'Some link to download this data'
},
xAxis: {
type: 'category',
title: {
text: null
},
min: 1,
max: 15,
scrollbar: {
enabled: true
},
tickLength: 1,
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Oops Count',
align: 'middle'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Count',
data: [
["Bangalore to Chennai", 40],
["Bangalore to Madurai", 55],
["Bangalore to Chennai", 40],
["Bangalore to Chennai", 40],
["Bangalore to Chennai", 40]
]
}]
});
})

Point which are mentioned by #jlbriggs are the problems
I added a hack for the second point (unique name) to show correct labels in xAxis
fiddle
Try using chart load events to check each names in data. If current name is matching to previous then add a space to it (name length changes from the previous one and it becomes a different name but looks the same) and form new array and update the chart series with this array.
chart: {
type: 'bar',
marginLeft: 150,
marginBotton: 50,
events: {
load: function() {
var series_data = this.series[0].data;
var current_item;
var spaces=""
var datas=[]
for (var i = 0; i < series_data.length; i++) {
current_item=series_data[i].name
if(current_item==series_data[i].name){
spaces+=" ";
var sName=series_data[i].name+spaces
datas.push([sName,series_data[i].y])
}else{
spaces=""
datas.push([series_data[i].name,series_data[i].y])
}
}
this.update({
series: {
data: datas
},
});
}
}
},
personally I think you should use this example Fiddle

There are two different things going on that are affecting this.
1) You are setting the x axis min to 1. The first category starts at 0, so you are telling the chart to skip it.
2) Your 3rd, 4th, and 5th data points are all listed as the same category, so it is associating them all with the same category on the axis. It won't repeat categories - they need to be unique if you are specifying them in the data point like that.
For example:
xAxis: {
type: 'category',
min: 0,
max: 14
},
series: [{
name: 'Count',
data: [
["Bangalore to Chennai", 40],
["Bangalore to Madurai", 55],
["Bangalore to Chennai2", 40],
["Bangalore to Chennai3", 40],
["Bangalore to Chennai4", 40]
]
}]
Updated fiddle with x axis min set to 0, and category names edited:
https://jsfiddle.net/jlbriggs/78yesztL/20/

Highstock bottom chart not shown

I'm using one the official highstock chart demo to create something similar with 2 charts stacked on top of each other. The problem is that the bottom chart (volume) is not displayed jsfiddle
A brief explanation of aapl-ohlc.json file will be helpful.
...
const data = JSON.parse(document.getElementById('ohlc-data').innerHTML);
// split the data set into ohlc and volume
const ohlc = data.map((a) => [a[0], a[1], a[2], a[3], a[4]])
const volume = data.map((a) => [a[0], a[5]])
// set the allowed units for data grouping
const groupingUnits = [
[
'week', // unit name
[1] // allowed multiples
],
[
'month', [1, 2, 3, 4, 6]
]
]
// create the chart
Highcharts.stockChart('container', {
legend: {
enabled: false
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
selected: 4,
inputEnabled: false
},
title: {
text: ''
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: ''
},
height: '60%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: ''
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
tooltip: {
split: true
},
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}],
navigator: {
enabled: false
}
});

This line:
const volume = data.map((a) => [a[0], a[5]])
Points to an element that doesn't exist. a[5] is not defined (there are only five elements to each sub array, no sixth element), therefore you have no y values in your data, and therefore no data series to display.
I don't know what data element is supposed to represent volume, but for reference, just to show that it does work, here is an updated fiddle using
const volume = data.map((a) => [a[0], a[1]])
https://jsfiddle.net/jlbriggs/0t9rq1f7/1/
EDIT:
Note that in the demo example that you based your fiddle on, the file that they use is aapl-ohlcv.json, not aapl-ohlc.json, which does in fact have a 6th data element in each sub array.
https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json
https://github.com/highcharts/highcharts/blob/master/samples/data/aapl-ohlcv.json

How to create a threshold in highcharts ng

I have a simple line chart with highchart ng the problem is that I cannot set the threshold to zero the threshold property according to the highcharts api should be plotoption.series.threshold also according to this answer it should be under plotoptions but as you can see in my jsfiddle it seems not to work for me. what I want here to do is to move the x-axis to the point 0 where all the negative values show after the x-axis
code:
$scope.highchartsNG = {
options: {
chart: {
type: 'line'
},
plotOptions: {
line: {
},
series: {
threshold: 3
}
}
},
series: [{
data: [10, 15, 12, 8, -7]
}],
title: {
text: 'Hello'
},
loading: false
}

You cannot do with plot Options see here
plotOptions: {
series: {
threshold:0,
negativeColor: 'green'
}
},
Example
You can try using plotLines for x-axis,
yAxis: {
title: {
text: 'dBmV'
},
plotLines: [{
value: 0,
width: 2,
color: 'green'
}]
},
DEMO

Highcharts area charts with single data, not rendering

I have an area chart with three series x-axis is 'datetype', when there is only data in each series the labels on x and y axis appears as expected but the plot point is missing. Can't expect a filled area for one data but even the plot point is missing.
'minRange' property is set and so the label is showing the date from the data.
Is this expected or there is a property that needs to be set to see the plot points.
fiddle link here http://jsfiddle.net/bM9j9/6/
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Area chart'
},
xAxis: {
type: 'datetime',
minRange: 864e5
},
yAxis: {
min: 0
//tickInterval: 0.5,
//minRange: 0.5
},
credits: {
enabled: false
},
plotOptions: {
area: {
stacking: 'normal',
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'Open',
data: [
[Date.UTC(2010, 0, 3), 120]
]
}, {
name: 'Closed',
data: [
[Date.UTC(2010, 0, 3), 60]
]
}, {
name: 'Accepted',
data: [
[Date.UTC(2010, 0, 3), 89]
]
}]
});
});

actually the data is rendered, But you cannot see it because the marker radius of the point is 0 in normal sate but it will be visible when your mouse hovers on it.
this is happening because you have disabled marker and have enabled hover for it.
To get the points visible turn them on.
plotOption: {
area:{
marker: {
enabled: true,
-----continue with other properties----
}
}
}
updated your fiddle here: http://jsfiddle.net/bM9j9/7/
Hope this will help you.