I'm trying to create a Highchart Area range and Line but can't get it to work and i don't know why. Could anyone please help with what i'm doing wrong?
The range should be the same for every point so that i can see which points is out of range.
JSFiddle: https://jsfiddle.net/ew5e1fmy/12/
$(function () {
var ranges = [
[1469904515000,3.5,8],
[1469913442000,3.5,8],
[1469926631000,3.5,8],
[1469948933000,3.5,8],
[1469948992000,3.5,8],
[1469955600000,3.5,8],
[1469960654000,3.5,8],
[1469968200000,3.5,8],
[1469971155000,3.5,8],
[1469981536000,3.5,8],
[1469991978000,3.5,8],
[1469998800000,3.5,8],
[1470013200000,3.5,8],
[1470032477000,3.5,8],
[1470041051000,3.5,8],
[1470046907000,3.5,8]
],
var values = [
[1469904515000,7.4],
[1469913442000,13.8],
[1469926631000,6.2],
[1469948933000,8.6],
[1469948992000,8.6],
[1469955600000,7.9],
[1469960654000,4.1],
[1469968200000,10.1],
[1469971155000,10.1],
[1469981536000,6.1],
[1469991978000,10.2],
[1469998800000,13.2],
[1470013200000,14.3],
[1470032477000,6],
[1470041051000,13.4],
[1470046907000,4]
];
$('#container').highcharts({
xAxis: {
title: {text: 'Dates',align: 'high'},
type: "datetime",
allowDecimals: true,
},
yAxis: {min: 0,
allowDecimals: true,
title: {text: '',align: 'high'},
labels: {overflow: 'justify'} ,
labels:{enabled: true},
},
plotOptions: {
line: {dataLabels: {enabled: false, style: {fontSize: '8px'}, allowDecimals: true}}
},
credits: { enabled: false },
series: [{
zIndex: 1,
lineWidth: 1,
name: 'BG',
allowDecimals:true,
data: ranges },
{
name: 'Range',
data: values,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
zIndex: 0 }]
});
});
I think you accidentally linked the values to the wrong serie (range serie is filled with values array while the values serie is filled with the ranges array)
Related
I am trying to make a scatter plot with two serie names (subcategory).
This example from highcharts is my starting point.
In this example, you only have two categories, namely female and male. I would like to see the name of the female/male in the tooltip. Not in the legend!
In my example jsfiddle I added four names in the data and tooltip
I understand that this is not the correct way, but I would like to clarify what I want to achieve. Does anyone know how to process this correctly, so that there are still two categories in the legend (female/male), but in the tooltip also the name of the female/male.
Thank you so much already!
Highcharts.chart('container', {
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'name: (), {point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Female',
color: 'rgba(223, 83, 83, .5)',
data: [{name: 'Anna', [161.2, 51.6]}, {name: 'Clair',[167.5, 59.0]]
}, {
name: 'Male',
color: 'rgba(119, 152, 191, .5)',
data: [{name: 'James',[174.0, 65.6], {name: 'Peet',[175.3, 71.8]]
}]
});
You have a fair number of errors with brackets and curly brackets, where there are too many or few brackets. Too many for me to point them all out, but mainly around the section area.
However, you need to define the scatter plot coordinates as x, and y when you define a name for the series, like this:
series: [{
name: 'Female',
data: [{
name: 'Anna'
x: 161.2,
y: 51.6
},
...
]
}
...
]
Also, to show the name of the datapoint (i.e. the person), you can use the following tooltip formatter:
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'Name: {point.name}, {point.x} cm, {point.y} kg'
}
Highcharts API on scatter data: http://api.highcharts.com/highcharts/series.scatter.data
Working example using your data: http://jsfiddle.net/ewolden/0uc1g8b5/2/
I am looking for the desired output like so:
series.dataLabels.align: left/right` isn't cutting it. It only makes it appear just after the blue rectangle of each bar and not on the far right, which is not what I want. I have also looked at the highcharts api a little bit and I was not able to find a chart option that gets the job done. Thanks in advance.
My current chart options:
var options = {
chart: {
renderTo: 'container',
type: 'bar',
},
credits: {
enabled: false
},
colors: ['#024a7a'],
title:{
text:null
},
plotOptions: {
bar: {
animation: false
},
series: {
showInLegend: false,
states: {
hover: {
enabled:false
}
}
}
},
tooltip: {
enabled: false
},
xAxis: [{
categories: ['SAC 1', 'SAC 2', 'SAC 3'],
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0
}],
yAxis: [{
gridLineWidth: 0,
labels: {
enabled: false
},
minorGridLineWidth: 0,
title: {
text: null
}
}],
series: [{
data: [10, 5, 15],
dataLabels: {
align: 'left',
enabled: true
}
}]
};
var chart = new Highcharts.Chart(options);
});
One of the ways to achieve that effect is passing specific xAxis and yAxis configuration objects, which contains few parameters:
xAxis: [{
opposite: true,
type: 'category',
labels: {
formatter: function() {
return this.chart.series[0].processedYData[this.pos] + ' %'
},
},
lineWidth: 0,
minorTickWidth: 1,
tickWidth: 0
},
yAxis: {
title: {
enabled: false
},
labels: {
enabled: false
},
gridLineWidth: 0,
max: 100
},
Configuration above fills labels by the series data values, so you should prepare series array similar like below:
series: [{
data: [31, 15, 9, 5]
}],
Lets look for this JSFiddle:
http://jsfiddle.net/daniel_s/yp9h6b7m/
Best regards!
Is there a way to have a column chart with two different scales. I have played with the example from highcharts but the result is still not perfect: https://jsfiddle.net/dfq4b6xz/
The problem is that the columns are not in the center of there each section
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Efficiency Optimization by Branch'
},
xAxis: {
categories: [
'cat1',
'cat2',
'cat3'
]
},
yAxis: [{
min: 0,
title: {
text: 'Employees'
}
}, {
title: {
text: 'Profit (millions)'
},
opposite: true
}],
legend: {
shadow: false
},
tooltip: {
shared: true
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0
}
},
series: [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150, 73],
pointPadding: 0.3,
pointPlacement: -0.2
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140, 90],
pointPadding: 0.4,
pointPlacement: -0.2
}, {
name: 'Profit',
color: 'rgba(248,161,63,1)',
data: [null,null, 198.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1
}, {
name: 'Profit Optimized',
color: 'rgba(186,60,61,.9)',
data: [null,null, 208.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1
}]
});
});
It's caused by setting different pointPlacement for series. I suggest to use default setting for that option: http://jsfiddle.net/dfq4b6xz/1/
You are specifically telling the chart to place the points in that manner, using the pointPlacement property:
pointPlacement: 0.2
and
pointPlacement: -0.2
Remove those lines altogether, and it works as it should:
http://jsfiddle.net/jlbriggs/dfq4b6xz/2/
[[EDIT - Pawel answered while I was typing my answer... same solution...]]
Here is my following chart config. I have been doing some research but couldn't find any help to enabling vertical scrollbar.
I know that I can set overflow-y property for chart container div, but to achieve frozen X-axis I need vertical scroll on series that is not container.
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['CITY1', 'CITY2','CITY3','CITY4'],
minorTickLength: 0,
tickLength: 0,
lineWidth: 0,
tickwidth: 0,
},
yAxis: {
max: 100,
tickInterval: 25,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
grouping: false,
stacking: 'normal'
}
},
scrollbar: {
enabled: true
},
series: [{
name: 'Q1',
data: [50, 70,0,35]
},{
name: 'Q2',
data: [20, 0,50,0]
},{
name: 'Q3',
data: [0, 0,40,20]
},{
name: 'Q4',
data: [0, 30,0,20]
}]
});
});
Can anybody suggest me how to enable the vertical scrollbar in Highcharts?
#Swetha: That fiddle is using Highstock library. Highcharts does not support scrollbars. Scrollbars are Highstock only
http://www.highcharts.com/docs/chart-concepts/scrollbar
You could set a fixed height or width to the chart and wrap into a div width overflow-x:auto, it's not the same but it is something at least.
Try this fiddle: http://jsfiddle.net/fj6d2/3076/
This may help you.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type:'bar',
},
xAxis: {
categories: ['CITY1', 'CITY2','CITY3','CITY4'],
min:2,
},
yAxis: {
title: {
text: 'Total fruit consumption'
},
},
plotOptions: {
series: {
grouping: false,
stacking: 'normal'
}
},
legend: {
verticalAlign: 'top',
y: 100,
align: 'right'
},
scrollbar: {
enabled: true
},
series: [{
name: 'Q1',
data: [50, 70,0,35]
}, {
name: 'Q2',
data: [20, 0,50,0]
}, {
name: 'Q3',
data: [0, 0,40,20]
},{
name: 'Q4',
data: [0, 30,0,20]
}]
});
When selecting the "All"-range in a HighStock chart with technical indicators then
the stock price (AAPL stock price) is not listed (most of the time, sometimes it appears) in the tooltip.
Open the sample chart here: http://jsfiddle.net/laff/SRfW6/
Hover over the chart and notice that the stock price is listed in the tooltip.
Click on the 'All' range selection.
Hover over the chart and notice that the stock price is no longer listed most of the time in the tooltip.
Has anybody an idea what the problem might be?
This the code from the example:
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
$(function() {
$('#container').highcharts('StockChart', {
title : {
text : 'MACD of AAPL stock price'
},
subtitle: {
text: 'From may 15, 2006 to May 10, 2013'
},
yAxis: [{
title: {
text: 'Price'
},
height: 200,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}, {
title: {
text: 'MACD'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2
}],
tooltip: {
crosshairs: true,
shared: true
},
rangeSelector : {
selected : 1
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
plotOptions: {
series: {
marker: {
enabled: false,
}
}
},
series : [{
name: 'AAPL Stock Price',
type : 'line',
id: 'primary',
data : data
}, {
name : 'MACD',
linkedTo: 'primary',
yAxis: 1,
showInLegend: true,
type: 'trendline',
algorithm: 'MACD'
}, {
name : 'Signal line',
linkedTo: 'primary',
yAxis: 1,
showInLegend: true,
type: 'trendline',
algorithm: 'signalLine'
}, {
name: 'Histogram',
linkedTo: 'primary',
yAxis: 1,
showInLegend: true,
type: 'histogram'
}]
});
});
});
Just adding this code to plotOptions.series seems to fix it (JSFiddle demonstration):
dataGrouping: { }
It appears that given your original code dataGrouping was somehow null.
I'll be honest. I don't know why. Looks borderline buggy.