How to create dashed bar graph in highcharts -
i have create bar graphs shown in attached image using highcharts. graph in image has been created using excel. highcharts doesn't seem provide such feature. though allows create graph using patterns 1 doesn't have control on patterns. can please confirm if can create similar kind of charts in highcharts or not? have created fiddle highcharts sample @ http://jsfiddle.net/sandeepkparashar/6c48x39v/3/dashed bar chart
as mentioned in comment, pattern-fill plugin can handle this. can create patterns , map series, every second column have 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-' + + ')' } : value; }) }; }); }
example: http://jsfiddle.net/6c48x39v/8/
natively, can set border dash style series need set dash style specific points, have split series dash/no border series or extend highcharts.
Comments
Post a Comment