How to create dashed bar graph in highcharts - highcharts

Question

I have to create bar graphs as shown in the attached image using highcharts. The graph in the image has been created using Excel. But Highcharts doesn't seem to provide such feature. Though it allows to create graph using patterns but one doesn't have much control on those patterns. Can anyone please confirm if we can create similar kind of charts in highcharts or not? I have created a fiddle with highcharts for sample at http://jsfiddle.net/sandeepkparashar/6c48x39v/3/Dashed Bar Chart

Answer 1

As was mentioned in the comment, pattern-fill plugin can handle this.
You can create patterns and map the series, so every second column will have the corresponded pattern.
var colors = ["#FF0000", "#FF8C00", "#FFFF00", "#00FF00", "#3366FF"];
var series = [{
"color": "#FF0000",
"name": "High",
"data": [298, 199, 448, 271, 772, 494, 935, 562]
}, {
"color": "#FF8C00",
"name": "Medium High",
"data": [130, 32, 234, 172, 159, 134, 218, 160]
}, {
"color": "#FFFF00",
"name": "Medium",
"data": [141, 163, 95, 63, 71, 22, 26, 13]
}, {
"color": "#00FF00",
"name": "Medium Low",
"data": [42, 8, 34, 19, 16, 20, 21, 26]
}, {
"color": "#3366FF",
"name": "Low",
"data": [4, 4, 0, 0, 0, 0, 0, 0]
}];
function getPatterns(colors) {
return colors.map(function(color, i) {
return {
id: 'custom-pattern-' + i,
path: {
d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
stroke: color
}
};
});
}
function getMappedSeries(series) {
return series.map(function(serie, i) {
return {
color: colors[i],
name: serie.name,
data: serie.data.map(function(value, j) {
return j % 2 ? {
y: value,
color: 'url(#custom-pattern-' + i + ')'
} : value;
})
};
});
}
example: http://jsfiddle.net/6c48x39v/8/
Natively, you can set border dash style for the series but you need to set dash style for the specific points, so you would have to split the series into dash/no border series or extend Highcharts.