I am using highchart's column chart in my application.
I am having column chart. When user select's a column in the chart , the selected column should shown with different border color and different width.
Here is the code snippet
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
categories: [
'Jan', 'Feb', 'Mar',
'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep',
'Oct', 'Nov', 'Dec'
]
},
plotOptions: {
series: {
allowPointSelect: true,
marker: {
states: {
select: { lineWidth: 10 }
}
}
}
},
series: [{
data: [
29.9, 71.5, 106.4,
129.2, 144.0, 176.0,
135.6, 148.5, 216.4,
194.1, 95.6, 54.4
]
}]
});
});
Code snippet
When I select the column the color changes to grey. I want them be to be remain same.
you mean something like this:
plotOptions: {
series: {
allowPointSelect: true,
states: {
select: {
color: null,
borderWidth:5,
borderColor:'Blue'
}
}
}
},
DEMO
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With