I'm trying to add stack labels (http://api.highcharts.com/highcharts#yAxis.stackLabels) to my chart
http://jsfiddle.net/Hjdnw/970/
According to the docs, https://github.com/pablojim/highcharts-ng all options should go into options object.
$scope.chartConfig = {
options: {
chart: {
type: 'bar'
},
yAxis: {
stackLabels: {
style: {
color: 'black'
},
enabled: true
}
},
},
series: [{
data: [10, 15, 12, 8, 7]
}],
title: {
text: 'Hello'
},
loading: false
}
What am I doing wrong?
You just need to add the bar stacking method to plotOptions, in chartConfig.options:
plotOptions: {
bar: {
stacking: 'normal'
}
}
When this value is null (or not specified), the stack values are disabled.
Here is a working demo: http://jsfiddle.net/scfy8w53/
The xAxis should be an object and not an array. The config should be set up like so:
xAxis: {
categories: ['Option 1', 'Option 2 ']
}
And the update should be:
$scope.chartConfig.xAxis.categories = ['Option New 1', 'Option New 2'];
Fiddle URL
Related
I'm trying to render plotLines on Highcharts. But somehow I'm not able to render labels on plotLines.
Here is the code snippet:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'view_content',
type: 'line'
},
title: {
text: 'Dummy Data by Region'
},
xAxis: {
categories: ['Africa', 'America', 'Asia']
},
yAxis: {
plotLines:[{
value:450,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal',verticalAlign: 'bottom',
textAlign: 'right',}
}]
},
series: [{
name: 'Year 1800',
data: [107, 31, 50]
},
{
name: 'Goal',
type: 'scatter',
marker: {
enabled: true
},
data: [450]
}]
});
And after chart is rendered I'm calling addPlotLines function.
chart.yAxis[0].addPlotLine({
value: 35.5,
color: 'green',
width: 2,
id: 'plot-line-1',
label:{text:"Testing"}
});
Plotlines is getting rendered but label on it is not rendering.
Here is the screenshot:
Am I missing anything here?
Jquery Version: 3.1.0
Highcharts Version: 6.0.3
This problem is a bug and it is reported here: https://github.com/highcharts/highcharts/issues/8477
To make it work in versions lower than 6.1.1 use this workaround:
Highcharts.wrap(Highcharts.Axis.prototype, 'getPlotLinePath', function(proceed) {
var path = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
if (path) {
path.flat = false;
}
return path;
});
Live demo: https://jsfiddle.net/BlackLabel/grpwztL3/
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
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
I'm trying to display each series name on X-Axis
http://jsfiddle.net/Jr79Y/9/
series: [{
name: 'Test',
data: [20]
}, {
name: 'Test',
data: [20]
}, {
name: 'Test',
data: [40]
}]
Does somebody knows how to do this?
This is a much simpler solution than anything I'm seeing for answers so far:
xAxis: {
categories:[]
}
.
series: [{
data: [{name:'Test 1',y:20,color:'red'},
{name:'Test 2',y:20,color:'blue'},
{name:'Test 3',y:40,color:'green'}]
}]
Example:
http://jsfiddle.net/jlbriggs/Jr79Y/37/
Although unless you have a really good reason for having each bar be a different color, it usually just adds unnecessary visual clutter and you're better off leaving them a single color.
http://jsfiddle.net/Jr79Y/35/
xAxis: {
categories: ['Test1', 'Test2', 'Test3']
}
For the series, this is quite dirty but it works:
series: [{
name: 'Test1',
data: [20, 0, 0]
}, {
name: 'Test2',
data: [0, 20, 0]
}, {
name: 'Test3',
data: [0, 0, 40]
}
Try this:
xAxis: {
categories: ['Test', 'Test', 'Test'],
title: {
text: null,
}
},
And in series part:
series: [{
name: 'Values',
data: [20,20,40]
},]
Reference.
EDITED:
You are using three group so you need to modify your data format. If you want the different color then try this:
series: [{
name: 'Values',
data: [20,0,0]
},
{
name: 'Values',
data: [0,20,0]
},
{
name: 'Values',
data: [0,0,40]
},]
Check this out
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories:['Test 1', 'Test 2', 'Test3']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
//colorByPoint: true
},
series: {
colorByPoint: true
}
},
legend: {
layout: 'vertical',
floating: true,
backgroundColor: '#FFFFFF',
align: 'right',
verticalAlign: 'top',
y: 60,
x: -60
},
series: [{
data: [40,20,20]
}]
});
});
http://jsfiddle.net/Jr79Y/36/
I am working on this demo. Why is the plot options color not getting the bar colors from the Color options (two colors)? As you can see it is taking color from only one for both colors.
$(function () {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
plotOptions: {
column: {
colorByPoint: true
},
series: {
pointWidth: 50
}
},
colors: [
'#D9844B',
'#3F4539'],
credits: {
enabled: false
},
title: {
text: 'Test',
style: {
color: '#2d2d2d',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['Ecology & Economics', 'Economics Only'],
},
yAxis: {
tickInterval: 50,
max: 300,
title: {
text: 'Number of ROR Facilities'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x + ' <b> : ' + this.y + '</b>';
}
},
series: [{
data: [29.9, 71.5],
dataLabels: {
enabled: true,
color: '#2d2d2d',
align: 'right',
x: -40,
y: 0,
style: {
fontSize: '12px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
I think the documentation is wrong. It says that colorByPoint is a bar/column option but you are correct it isn't working. Moving it to a series option and it does work:
plotOptions: {
series: {
pointWidth: 50,
colorByPoint: true
}
},
Updated fiddle.
Referring to #Mark answer, the Highcharts documentation is correct.
There is a difference between defining options in every series in Highcharts, especially bar and column series are different series.
You are using bar series (chart.type: 'bar'), but in plotOptions you are defining colorByPoint only for a column series which, obviously, does not even exist in your chart.
You have many solutions:
1) You can define colorByPoint inside a specific series options:
chart: {
type: 'bar'
},
series: [{
colorByPoint: true,
data: [4, 3, 5]
}]
2) you can define colorByPoint for all series:
chart: {
type: 'bar'
},
plotOptions: {
series: {
colorByPoint: true
}
},
series: [{
data: [4, 3, 5]
}]
3) You can define colorByPoint for all bar type series:
chart: {
type: 'bar'
},
plotOptions: {
bar: {
colorByPoint: true
}
},
series: [{
data: [4, 3, 5]
}]
4) You can use inverted column type series (which is actually a bar series):
chart: {
type: 'column',
inverted: true
},
plotOptions: {
column: {
colorByPoint: true
}
},
series: [{
data: [4, 3, 5]
}]
5) You can also define the color for each bar separately:
series: [{
type: 'bar',
data: [{
y: 4,
color: 'red'
}, {
y: 3,
color: 'blue'
}, {
y: 5,
color: 'green'
}]
}]
And even more. Above solution should be enough for you.
Remember, plotOptions.column will not work for chart.type: 'bar'.