Is it possible to add shadow behind highchart bars, so each column have a shadow that is filled with 100% height? Something like in the picture? Sorry if the shadow color is very gray.
This is a JsFiddle where I was able to add line seprator between the bars, but I really I need a shadow that represent each bar to 100% height
https://jsfiddle.net/wh67so0a/1/
xAxis: {
type: 'category',
gridLineColor: 'red',
gridLineWidth: 2,
tickColor: 'green',
tickLength: 20,
tickWidth: 2,
tickmarkPlacement: 'between'
// categories: ['Client 1', 'Client 2', 'Client 3']
},
You can use plotBands:
xAxis: {
...,
plotBands: [{
color: 'gray',
from: -0.25,
to: 0.25
}, {
color: 'gray',
from: 0.75,
to: 1.25
}, {
color: 'gray',
from: 1.75,
to: 2.25
}]
}
Live demo: https://jsfiddle.net/BlackLabel/8a7wye13/
API Reference: https://api.highcharts.com/highcharts/xAxis.plotBands
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 really want to know how to make it like images below in highcharts.
Have a good day.
enter image description here
You can use xrange series with partialFill property: https://jsfiddle.net/BlackLabel/nhoxj4tk/ or simple bar series with plotBands:
series: [{
type: 'bar',
pointPadding: 0,
groupPadding: 0,
data: [12]
}],
yAxis: {
max: 20,
plotBands: [{
color: 'yellow',
from: 0,
to: 20
}]
}
Live demo: http://jsfiddle.net/BlackLabel/ao3v6h15/
API Reference: https://api.highcharts.com/highcharts/yAxis.plotBands
Is it possible to remove/hide the concentric circles (yAxis plotLines) that Highcharts automatically draws in polar charts? Setting the yAxis lineWidth to zero did not work. Also, setting the yAxis plotLines to an empty array did not work.
These options successfully create a green plot band filling the chart, but do not create a red plot line in the chart. However, what appears to be a light grey y-axis plot line circle is drawn at y=5. This is the line I want to remove or hide.
{
colors: COMPETITOR_COLORS,
chart: {
polar: true,
backgroundColor: 'pink',
plotBackgroundColor: KAHN_DARK_GRAY_BG,
},
title: {
text: '',
},
tooltip: {
valueDecimals: 2,
headerFormat: '<br/>',
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0,
},
pane: {
startAngle: 0,
endAngle: 360,
},
xAxis: {
min: 0,
max: 360,
tickInterval: 45,
labels: {
format: '{}',
},
},
yAxis: {
min: 0,
max: 10,
plotLines: [{color: 'red', value: 7, width: 3}],
plotBands: [{color: 'green', from: 0, to: 10}],
labels: {
format: '{}',
},
},
plotOptions: {
series: {
pointStart: 45,
pointInterval: 90,
},
column: {
pointPadding: 0,
groupPadding: 0,
},
},
series: kahnSeries,
}
The lines that you want to remove are grid lines, not plot lines. To remove them use:
yAxis: {
gridLineWidth: 0,
...
},
Live demo: http://jsfiddle.net/BlackLabel/46xvajn5/
API Reference: https://api.highcharts.com/highcharts/yAxis.gridLineWidth
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
}]
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] }] }]