javascript - Different border for selected column in highcharts - Stack Overflow

admin管理员组

文章数量:1302319

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.

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.

• javascript
• highcharts

Share Improve this question Follow edited Jan 17, 2014 at 19:37 Jaak Kütt 2,65644 gold badges3333 silver badges4040 bronze badges asked Feb 26, 2013 at 9:26 syed imtysyed imty 1,02811 gold badge1010 silver badges2727 bronze badges 2

• +1. You mean multi select , right? – AliRıza Adıyahşi Commented Feb 26, 2013 at 10:13
• No multi select. Just single select. When user select a column, the selected column should be highlighted with different border size and different border color. Hope i am clear. – syed imty Commented Feb 26, 2013 at 10:43

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

you mean something like this:

plotOptions: {
        series: {
            allowPointSelect: true,
            states: {
                select: {
                    color: null,
                    borderWidth:5,
                    borderColor:'Blue'
                }
            }
        }
    },

DEMO

本文标签： javascriptDifferent border for selected column in highchartsStack Overflow