Is it possible to create min max and mean chart in highchart as shown in above screenshot? I have tried OHLC but it's not same. So let me know if we can customize?
Try to use boxplot, with adapted data:
http://jsfiddle.net/G54B6/1/
series: [{
name: 'Observations',
data: [
[760, 801, 801, 801, 965],
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
}]
Related
I need to make a combination of draggable line chart and treemap.
See here: JSFiddle example
Highcharts.chart('container', {
series: [{
type: "treemap",
data: [
{id: "NS",name: 'NS_area', value:5},
// ...
}
},{
data: [[0, 100], [10,90.9], [20,81.8], [30,72.7]],
type: 'line',
}]
});
can I display x,y axis when using treemap? Do you have other idea how to combine both charts?
One workaround that might work for you is adding an additional axis and simply linking it to the original one.
For example, creating one "duplicate" x-axis and y-axis:
xAxis: [{
},{
linkedTo: 0
}],
yAxis: [{
}, {
linkedTo: 0
}]
See this JSFiddle demonstration of it in use. This makes the axis mimic the look you originally had.
If you want the line chart to be completely independent of the original axis, you could just do the following:
series: [{
// ...
}, {
data: [[0, 100], [10,90.9], [20,81.8], [30,72.7]],
type: 'line',
yAxis: 1,
xAxis: 1,
// ...
}],
xAxis: [{
},{
}],
yAxis: [{
}, {
}],
See this JSFiddle demonstration of it in use. This works as a completely separate axis.
I am trying to create a piechart using highcharts. And I am facing one problem: The sticks that are denoting the contents are not editable, meaning I am not able to customize it, say giving a different color or make the stick size small/big or thin/thick whatever.
Here is the code. Please help me to resolve.
Highcharts.chart('container', {
chart: {
type: 'pie'
},
series: [{
data: [29.9, 71.5],
color: '#000'
}]
});
You can set colors globally as
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572',
'#FF9655', '#FFF263', '#6AF9C4'
],
});
Or you can override global colors in series
series: [{
data: [{
name: 'Firefox',
y: 44.2,
color: "#fff"
},
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]
}]
Change size of connector
plotOptions: {
pie: {
dataLabels: {
connectorWidth: 20
}
}
},
fiddle demo
Can you please take a look at This Demo and let me know why I am not able to set the Fill Color and it's opacity on Highchart Spider web. I already tried to add fillColor: '#00FF00' to chart's series but apparently it is not working
series: [{
name: 'Allocated Budget',
data: [43000, 19000, 60000, 35000, 17000, 10000],
pointPlacement: 'on',
fillColor: '#00FF00'
}, {
name: 'Actual Spending',
data: [50000, 39000, 42000, 31000, 26000, 14000],
pointPlacement: 'on',
fillColor: '#00FF00'
}]
Thanks
This is because an line chart has no fill property. Change to areaspline or area.
I thought a newly added series should not affect old ones, but when I tried to add a scatter series with custom markers, empty spaces will be created between candlesticks where the new points are. I know set ordinal option on xAxis to false will avoid it, but the problem of that is it may be possible that some of the data points for candlesticks are missing, creating gaps on the candlestick series. Hence, what I want is a scatter series does not change the look of the candlestick series.
This is the options that I pass to highstock series:
series : [{
type : 'candlestick',
name : 'AAPL Stock Price',
data : data,
dataGrouping : {
units : [
['week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]]
]
}
}, {
type: "scatter",
data: [{
x: 1362407640000,
y: 460,
marker: {
symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
}
}],
}]
In a word, I just want to get rid of the empty space on the candlestick series when a scatter series is created.
Here is the fiddle http://jsfiddle.net/vRDNZ/. Thank you for your help!
In general this is exactly how ordinal axis should work. There is simple workaround for this, use second xAxis, which is linked to first one, and connect scatter series to that axis. Example: http://jsbin.com/oyudan/267/
xAxis: [{
opposite: false
}, {
linkedTo: 0,
offset: 0,
labels: {
enabled: false
}
}],
series : [{
type : 'candlestick',
name : 'AAPL Stock Price',
data : data,
dataGrouping : {
units : [
['week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]]
]
}
}, {
type: "scatter",
xAxis: 1,
data: [{
x: 1362407640000,
y: 460,
marker: {
symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
}
}],
}]
How can I set the opacity for the fill color in the pie chart? I am using the highcharts js library. See code below:
$(function () {
$('#container').highcharts({
chart: {
backgroundColor: 'none',
type: 'pie',
},
title: {
text: 'Health'
},
plotOptions: {
series: {
borderWidth: 0,
fillOpacity: 0.1,
colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', ],
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
A bit of a JS newbie, so please be kind. Thanks!
I'll be kind. You can specify the color in rgba format with the fourth parameter being the opacity. See 'Chrome' below:
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true,
color: 'rgba(150,100,50,0.1)'
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
Here's a working fiddle: http://jsfiddle.net/manishie/62VJJ/
The above solution works fine if you know what color you wish to assign to the slice. But if the color is picked from a palette which is generic, there is no way to give the opacity. It always takes 0. For example:
Highcharts.chart('container',
{colors: [my palette]},
series:[{
type: 'pie',
data: [1, 2, 3]
}]
)
In the above case if I set series: [{fillOpacity: 0.5}] it is not honored.
The only option I see is that the palette should have the colors in rgba format. This may not be possible since my palette is a generic palette. Is there any other way in which I can set the opacity of the slices in a pie chart.