When I set this:
series: {
fillOpacity: 0.5,
fillColor:'#fff000'
}
highcharts will ignore opacity, if I take away fillcolor, the opacity works. However, I was asked to set fillcolour to be different.
http://jsfiddle.net/ywL646r8/1/. Can someone help?
Many Thanks
You can set the fill color with a rgba value
plotOptions: {
area: {
color: '#ff0000',
},
series: {
fillColor:'rgba(255,240,0,.5)'
}
http://jsfiddle.net/ywL646r8/2/
Related
I enabled shadow: true
Now, I want to customize the shadow by adding custom values for color, offsetX, offsetY, opacity, width
is there an example somewhere? I am a bit lost, THX!
https://api.highcharts.com/class-reference/Highcharts.ShadowOptionsObject#toc0
Here you can find information how to use the shadow available options: https://api.highcharts.com/highcharts/series.line.shadow
Demo: https://jsfiddle.net/BlackLabel/Lu89x4ra/
plotOptions: {
series: {
shadow: {
color: 'red',
offsetX: 10,
offsetY: 10
}
}
},
I am using Highcharts 4.0.
This is what I get with the default parameters.
I want to customize it while I can't find the docs.
This is what I expect:
The background polygon can be filled at a specified color/transparency (eg. dark green in this picture)
The valued polygon can be filled at a specified color/transparency (eg. blue in this picture)
The value number can be displayed
The unwanted scale-number (0, 2.5, 5) can be hidden
All these options are described in the Highcharts-API-Doc: http://api.highcharts.com/highcharts
1) The background polygon can be filled at a specified color/transparency (eg. dark green in this picture)
This is tricky. You can either try to add a plotBand to the yAxis, but you need to know the max Value, otherwise it will leave a white gap. All the other options (set a background color to the pane or chart.plotBackgroundColor options do not take the shape of the polar chart into account.
yAxis: {
plotBands: {
from:0,
to: 75000,
color: '#0c0'
}
}
2) The valued polygon can be filled at a specified color/transparency (eg. blue in this picture)
set the type of the series to 'area', you can then style it either directly in the series or via the plotOptions.series-Object
series: [{
name: 'Whatever',
type: 'area',
data: [...]
}]
[...]
plotOptions: {
area: {
fillOpacity: 0.9
}
}
3) The value number can be displayed
for areas, set the dataLabels.enabled property to true
plotOptions: {
area: {
dataLabels: {
enabled: true
}
}
}
4) The unwanted scale-number (0, 2.5, 5) can be hidden
set the labels.enabled property of the yAxis to false
yAxis: {
labels: {
enabled: false
}
}
Fiddle http://jsfiddle.net/doc_snyder/qnqux036/
I have a couple of formatting questions, as you'll see I'm running a very small chart 225*150...
How do I remove the x-axis labels? I still want the information in the tooltip, just not along the axis. I've tried...
xAxis: {
title:{
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled:false
}
},
...but it still shows "0, .5, 1, 1.5 etc..."
I've adjusted the thickness of my lines but now the datapoint indicators themselves can't bee seen. Can somebody show me which value controls that?
Last one, how do I set zero for the y-axis scale?
Here's a fiddle!
Thanks!
UPDATE: Added suggestions to original fiddle.
In this block:
xAxis: {
title:{
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled:false
}
},
You have
1) the categories property listed inside the title attribute, and
2) you have enabled: false set for the title attribute
categories is a property of the axis directly, and the enabled: false should be applied to the labels, not the title.
"I've adjusted the thickness of my lines but now the datapoint indicators themselves can't bee seen. Can somebody show me which value controls that?"
Primarily the marker radius property:
http://api.highcharts.com/highcharts#plotOptions.series.marker.radius
You can also look at the lineWidth property of the marker.
"Last one, how do I set zero for the y-axis scale?"
axis min property:
http://api.highcharts.com/highcharts#yAxis.min
updated fiddle: http://jsfiddle.net/jlbriggs/z6ZLt/8/
To disable the xAxis.labels you set enabled to false:
xAxis: {
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled: false,
labels: {
enabled: false
}
}
For doing "set zero for the y-axis scale" you set the yAxis.min value to 0:
yAxis: {
min: 0,
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}
To handle the size of the line + markers you need to modify their properties in :
plotOptions: {
series: {
marker: {
radius: 1.5
},
pointWidth: 1
}
}
Is there a way to add a second needle of a different colour to a VU Meter ('gauge') style chart in Highcharts? I know that you can change the colour of the needle per chart using plotOptions:gauge:dial e.g.
plotOptions: {
gauge: {
dial: {
radius: '100%',
backgroundColor : 'grey'
}
}
}
and I have tried to overlay a second pane and specify individual plotOptions (as per this fiddle (http://jsfiddle.net/jdalton/xfV5k/8/) but without any success
You can use the same options as in plotOptions directly in series:
series: [{
data: [{y:-6, color: 'red'}],
yAxis: 0,
dial: {
backgroundColor : 'red'
}
}
Example: http://jsfiddle.net/xfV5k/11/
Is there a way to influence the transparency of the bubbles in Highcharts bubble charts?
I was looking for a configuration comparable to area fillColor, but didn't find one.
I tried using rgba colors for the series, like so:
series: [{
color: "rgba(255,0,0,0.5)",
data: [
but that only made the border semi transparent.
Edit:
I just tried to use marker fillColor:
series: [{
color: "rgba(255,0,0,1)",
marker: {
fillColor: "rgba(255,0,0,0.1)"
},
but that doesn't influence the transparency
You can use fillOpacity parameter,
marker: {
fillOpacity:0.3
}
http://jsfiddle.net/g8JcL/116/
The easiest way would be adding a CSS property.
.highcharts-point {
fill-opacity: 0.8;
}
But this will be applied to all the bubbles.