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.
Related
I have a Gantt Chart with a Navigator bar at the bottom that look like this:
The image as you can see is hard to read because of the color of the milestones... my question is, how do we get a white border on each of these milestones... I tried on almost everything the docs say, on series, datalabels, etc and I can't make any border show, thank you for any help you may bring.
You just need to specify borderWidth and borderColor properties for the specific data points:
Highcharts.ganttChart('container', {
series: [{
...,
data: [
...,
{
...,
borderWidth: 2,
borderColor: 'black'
}]
}],
...
});
Live demo: https://jsfiddle.net/BlackLabel/xps2d6z3/
API Reference:
https://api.highcharts.com/gantt/series.gantt.borderWidth
https://api.highcharts.com/gantt/series.gantt.borderColor
I wanted to show Bar(column) chart using HighChart, but bar chart should show holo columns(transparent column with borders). For this purpose I set color and borderColor as follows
plotOptions: {
series: {
color: Highcharts.Color('#000000').setOpacity(0).get('rgba'),//'#000000'
borderColor: '#000000'
}
},
but it is not showing series symbol in legends, as shown in this jsFiddle. Is there anyway to show series symbol in Legends, keeping columns(bars) to appear holo(transparent with visible borders).
I am using ideas from Style by CSS from highcharts to customize the label
Fiddle link
css
.highcharts-legend-item * { /*for default case*/
fill: black !important;
}
.highcharts-legend-item-hidden * { /*when clicked*/
fill: gray !important;
}
The legend symbol is not showing because it's color has the opacity 0, the same as the serie.
Couldn't find anything that would allow you to set the color of the marker, but i have a workaround.
You can format the legend label with the symbol, here you can find some of those symbols http://www.fileformat.info/info/unicode/block/geometric_shapes/list.htm
Here is the code to hide the legend symbol when it's hidden and format it's label.
legend: {
symbolPadding: 0,
symbolWidth: 0.001,
symbolHeight: 0.001,
symbolRadius: 0,
labelFormatter: function () {
return "◼ " + this.name;
}
},
full fiddle here http://jsfiddle.net/hfuuocdw/2/
I fixed it by setting color and border color of each series, and then adding a css style for "fill" to be transparent, as shown in this fiddle.
.highcharts-series-group .highcharts-point {
fill: rgba(0,0,0,0)
}
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/
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/
I am having trouble getting the marker radius working with high stock charts. I have been trying to get this working using both plot options, and a setting against the series directly:
plotOptions: {
series: {
marker: {
radius: 90
}
}
},
(or see http://jsfiddle.net/zMH7Q/).
Changing other attributes such as the marker shape works fine, but any changes to the radius seem to be ignored. I have tried setting this in both plot options, and directly against the series but to no avail. It is definately mentioned in the documents (http://api.highcharts.com/highstock#plotOptions.area.marker.radius) so should work unless I am doing something stupid (fairly likely).
Any help would be appreciated :-)
David
In HighStock, unlike HighCharts, the default for marker is enabled: false, this is because the data tends to be very dense and markers wouldn't add much value to the data comprehension of the user.
You need to modify your code to:
plotOptions: {
series: {
marker: {
enabled: true,
radius: 90
}
}
},
for the markers to show up.
EDIT: I will leave the above up in case someone comes across this and needs it. What David really wants to know is whether the series symbol during hover can be changed. The code for that is:
plotOptions: {
series: {
marker: {
lineColor: null,
states: {
hover: {
fillColor: 'white',
radius: 10
}
}
}
}
}
Which is straight from the Highcharts API reference at http://api.highcharts.com/highcharts#plotOptions.scatter.marker.states.hover.radius