Custom marker to render a dashed line as part of highcharts
A Pen by Arjun Kannan on CodePen.
Custom marker to render a dashed line as part of highcharts
A Pen by Arjun Kannan on CodePen.
<div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div> |
$(function() { | |
//Detailed explanation here http://stackoverflow.com/questions/27542928/extend-highcharts-renderer-symbols-to-have-plus-sign | |
// Define a custom symbol path | |
Highcharts.SVGRenderer.prototype.symbols.dashedLine = | |
function(x, y, w, h) { | |
var returnArray = []; | |
var startPoint = x - 5 * w; | |
var endPoint = x + 5 * w; | |
var dashWidth = w; | |
var gapWidth = 0.5 * w; | |
var yValWithOffset = y + w / 2; //account for marker radius when moving to the right Y position | |
var currentPoint = startPoint; | |
for ( | |
var currentPoint = startPoint; currentPoint <= endPoint; currentPoint += dashWidth + gapWidth /*jump forward one location*/ ) { | |
returnArray.push('M', currentPoint, yValWithOffset, 'L', currentPoint + dashWidth, yValWithOffset); | |
} | |
returnArray.push('z'); //end drawing | |
return returnArray; | |
}; | |
if (Highcharts.VMLRenderer) { | |
Highcharts.VMLRenderer.prototype.symbols.dashedLine = Highcharts.SVGRenderer.prototype.symbols.dashedLine; | |
} | |
$('#container').highcharts({ | |
title: { | |
text: 'Dashed Line Marker Symbol' | |
}, | |
legend: { | |
y: -40 // make room for subtitle | |
}, | |
xAxis: { | |
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] | |
}, | |
series: [{ | |
name: 'Custom symbol', | |
data: [54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6], | |
marker: { | |
symbol: 'dashedLine', | |
lineColor: null, | |
lineWidth: 1 | |
}, | |
dataLabels: { | |
allowOverlap: true, | |
zIndex: 3, | |
enabled: true, | |
x: -57.5, | |
padding: 5, | |
format: '{y:0.2f}', | |
style: { | |
color: '#555555' | |
} | |
} | |
}], | |
credits: { | |
enabled: false | |
} | |
}); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="https://code.highcharts.com/highcharts.js"></script> |
Thanks man !