CODEWITHSUNDEEP
javascripthighcharts
RockridgeKid
RockridgeKid

Reputation: 145

HighCharts: set specific border width and border color dynamically for one column

I would like to change dynamically the border width and border color of only one of the columns in a basic column chart similar to the following: 

var chartingOptions = {
chart: {
    renderTo: 'container',
    type: 'column'
},
xAxis: {
    categories: ['5:1', '4:1', '3:1', '2:1', '1:1', '1:2', '1:3', '1:4', '1:5']
},
plotOptions: {
    column: {           
      grouping: false
    }
},
series: [
    {
    name: 'Serie 2',
    data: [20, 24, 30, 40, 60, 80, 90, 96, 100]},
{
    name: 'Serie 1',
    data: [100, 96, 90, 80, 60, 40, 30, 24, 20]}
            ]
};

var chart = new Highcharts.Chart(chartingOptions);

JSFIDDLE here.

I tried to changed it for the first serie directly through

chart.series[0].data[2].series.borderColor = 'black'

but it does not update the serie. Anything helps!

Upvotes: 0

Views: 4291

Answers (3)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

You need to refer to the SVG element and manipulate stroke and stroke-width paraemters.

Example: http://jsfiddle.net/usLuzrwn/3/

Upvotes: 5

arachnid
arachnid

Reputation: 236

The borderColor and borderWidth properties are available for series object and not for data object. As I mentioned you can check the documentation for the same in above link.

However you can force data object to have borderColor and borderWidth by defining these properties in source code of highcharts.js.

Hope this info helps.

Upvotes: 0

arachnid
arachnid

Reputation: 236

chart.series[0].data[2].series.borderColor = 'black' will not do anything. Instead try chart.series[0].data[2].series.color = 'black' but this will also change the color of tooltip.

In order to change color of one column explicitly try as

data: [{ name: 'Point 1', color: '#00FF00', y: 0 }, { name: 'Point 2', color: '#FF00FF', y: 5 }]

For more information check here http://api.highcharts.com/highcharts#series.data.color

You can refer this [fiddle] http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/column-bordercolor/

Upvotes: 0

Related Questions