I have a bar chart and I would like to color one of the series white and enable a black border for this series only.
I'd rather not enable a border for everything. Is this possible?
I have a fiddle example - I was hoping it could be achieved in a similar way to the 'color' attribute of the series, but I can't see anything in the API;
series: [{
name: 'Measure',
data: [{
y: 10}, { y:9, color: 'white'}, { y: 8 }, { y: 7 }, { y: 7.2 }]
}]
http://jsfiddle.net/ZzXY2/
It turns out that 'borderColor' is an acceptable attribute of each of the data points, it's just not documented.
Turn the border on and set the default color to white:
plotOptions: {
bar: {
borderColor: '#FFFFFF',
borderWidth: 1
}
}
Set the border color within the appropriate series
series: [{
name: 'Measure',
data: [
{y: score2, color: colors[1], borderColor:'Yellow'},
{y: scoreprev, color: colors[4] },
{y: score1, color: colors[0] },
{y: score3, color: colors[2] },
{y: score4, color: colors[3] }] }]
Related
I have attached the screenshot to show the dash line in left side of the chart. It would be helpful if we can achieve the functionality and I tried to increase the width of the border, it is visible slightly. Do you have any proper approach to achieve this?
Code Snippet :
Highcharts.chart('container', {
chart: {
type: 'bar',
charWidth: 520,
chartHeight:300,
margin: [70,0,0,0]
},
xAxis: {
categories: ['Jan'],
visible: false
},
yAxis: {
min: 0,
visible: false
},
plotOptions: {
series:{
stacking:'normal'
},
dataLabels: {
enabled : false,
}
},
series: [{
name: 'John',
data: [{
y: 15
}]
}, {
name: 'Jane',
data: [{
y: 22
}]
}, {
name: 'Joe',
data: [{
y: 33,
}]
}, {
stacking: false,
data: [55],
grouping: false,
dashStyle:'ShortDash',
color: 'transparent',
borderWidth: 2,
borderColor: 'red',
}]
});
Thanks for the response
[![enter image description here][2]][2]
The left side of the bar is connected to the xAxis, which makes the left border less visible. There are some possible solutions to this issue.
You can set the minimum value of the xAxis to -0.1 and set startOnTick property to false. Then the left border is visible (it's not directly connected to the axis).
Demo:
https://jsfiddle.net/BlackLabel/pqy84hvs/
API references:
https://api.highcharts.com/highcharts/xAxis.startOnTick
https://api.highcharts.com/highcharts/xAxis.min
yAxis: {
min: -0.1,
visible: false,
startOnTick: false
}
You can set the borderWidth property to 3. Then the border is visible.
Demo:
https://jsfiddle.net/BlackLabel/01m6p47f/
API references:
https://api.highcharts.com/highcharts/series.bar.borderWidth
{
name: 'Joe',
borderWidth: 3,
borderColor: 'red',
data: [{
y: 33,
}]
}
You can also use SVG Renderer and render the border yourself.
Docs:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Example demo of using SVG Renderer:
https://jsfiddle.net/BlackLabel/2koczuq0/
I want to create PIE chart using Highchart as below image, please suggest a solution-
Thanks
You can use two pie series with different innerSize and size properties, for example:
series: [{
data: [{
y: 1,
color: 'blue'
}]
}, {
size: '70%',
innerSize: '30%',
data: [{
y: 3,
color: 'green'
}, {
y: 12,
color: 'blue',
showInLegend: false
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/4b1phj67/
API Reference: https://api.highcharts.com/highcharts/series.pie
This is what I mean by halo:
http://api.highcharts.com/highcharts/plotOptions.area.states.hover.halo
It seems that "fill", "fillColor" and "color" in or not in "attributes" does not do the job.
As you can see from this jsfiddle: jsfiddle.net/s7ff806c/1 The halos are hallow circles which one can see through. I would like the circle to be solid (i.e not be able to be see through).
I think intransparently colored means full opaque see here how to achieve
in each series give color: 'rgba(223, 83, 83, 1.0)', 1.0 means full opaque, in rgba format
series: [{
name: 'Female',
color: 'rgba(223, 83, 83, 1.0)',
data: [
[161.2, 51.6],....]
}, {
name: 'Male',
color: 'rgba(119, 152, 191, 1.0)',
data: [
[174.0, 65.6],...]}
]
Fiddle link with Customize halo
Update
halo opacity can be adjusted see Opacity from highcharts docs
Fiddle Demo with Opacity adjusted to full
plotOptions: {
series: {
states: {
hover: {
halo: {
size: 9,
opacity:1,
attributes: {
fill: Highcharts.getOptions().colors[2],
'stroke-width': 2,
stroke: Highcharts.getOptions().colors[1]
}
}
}
}
}
},
Update ->set the opacity of stroke independently of the opacity of the fill
give 'stroke-opacity': .5, inside attribute
Fiddle link
plotOptions: {
series: {
states: {
hover: {
halo: {
size: 9,
opacity: 1,
attributes: {
fill: Highcharts.getOptions().colors[2],
'stroke-width': 5,
'stroke-opacity': .5,
stroke: Highcharts.getOptions().colors[1]
}
}
}
}
}
},
I am trying to use the highcharts solid gauge, and I would like to have a legend, however Highcharts developers seem to have removed the color option from solid gauge series, which I believe is what the legend pulls it's color from.
series: [{
name: 'Move',
borderColor: Highcharts.getOptions().colors[0],
color: Highcharts.getOptions().colors[0],
data: [{
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '100%',
y: 80
}],
showInLegend:true
}, {
name: 'Exercise',
borderColor: Highcharts.getOptions().colors[1],
color: Highcharts.getOptions().colors[1],
data: [{
color: Highcharts.getOptions().colors[1],
radius: '75%',
innerRadius: '75%',
y: 65
}],
showInLegend:true
}, {
name: 'Stand',
borderColor: Highcharts.getOptions().colors[2],
color: Highcharts.getOptions().colors[2],
data: [{
color: Highcharts.getOptions().colors[2],
radius: '50%',
innerRadius: '50%',
y: 50
}],
showInLegend:true
}]
Jsfiddle
Is there any way to get my legend to match the series colors?
I haven't been able to figure out how to color the marker in the legend, but to me the markers don't make sense in this case anyhow. So, I've turned them off in my fiddle.
To color the text, you can use the legend labelFormatter function.
legend: {
labelFormatter: function() {
return '<span style="text-weight:bold;color:' + this.userOptions.color + '">' + this.name + '</span>';
},
symbolWidth: 0
},
http://jsfiddle.net/9dq2p7dw/21/
Just to add, Barbara's answer is still valid in 2019.
However, to remove the marker, you'll have to add
squareSymbol: false
I would have added this as a comment in her answer but I do not have enough reputation points.
Is it possible to make an arearange series like the following? :
I saw the option to set oppacity, but that will give the series like the following:
Is there a way to hide the top line or to set the opacity of top line only?
You can set only lineWidth for whole area-range series. Instead you can disable that line, and use separate series: http://jsfiddle.net/9agdf5ar/
series: [{
name: 'Temperature',
data: averages,
zIndex: 1,
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[0]
}
}, {
name: 'Range',
data: ranges,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
dataLabels: {
enabled: true
},
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
zIndex: 0
}]