CODEWITHSUNDEEP
highcharts
David Mullin
David Mullin

Reputation: 49

How to Make a Dashed Bar Chart Border in Highcharts

I have a stacked bar graph with two data attributes. I want to make the second bar looked grayed out with a dashed border. I've tried "dashStyle: 'longdash' but that and anything else i've tried doesn't work.

This is the look i'm going for: enter image description here

Upvotes: 1

Views: 3676

Answers (2)

wliao
wliao

Reputation: 51

Notice that in the latest version of HighCharts, Highcharts.seriesTypes.bar.prototype.pointAttrToOptions is no longer defined, thus the code will error out. You can simply comment out the first line (Highcharts.seriesTypes.bar.prototype.pointAttrToOptions.dashstyle = 'dashStyle';) and it will work. (http://jsfiddle.net/willieliao/6c48x39v/)

var chart = new Highcharts.Chart({

  chart: {
    renderTo: 'container',
    type: 'bar'
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  plotOptions: {
    bar: {
      stacking: 'percent'
    }
  },

  series: [{
    data: [29.9],
    borderColor: 'black',
    borderWidth: 2,
    dashStyle: 'dash'
  }, {
    data: [13]
  }]

});

Upvotes: 2

Paweł Fus
Paweł Fus

Reputation: 45079

In general it's not supported, but simple hack can enable this: http://jsfiddle.net/ztRF5/132/ (note: required is latest version from github).

// mapping between SVG attributes and the corresponding options
Highcharts.seriesTypes.bar.prototype.pointAttrToOptions.dashstyle = 'dashStyle';

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'bar'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    plotOptions: {
        bar: {
            stacking: 'percent'   
        }
    },
    series: [{
        data: [29.9],
        borderColor: 'black',
        borderWidth: 2,
        dashStyle: 'dash'
    }, {
        data: [13] 
    }]
});

Upvotes: 5

Related Questions