koh_edwin
Posts: 24
Joined: Thu Aug 05, 2021 8:35 pm
Location: Toronto

Marker line style

hi,
ive seen the options for markers and i need to convert the line of a marker into dashes. ive tried using dashstyle as a marker option but it doe snot work.
how do i do this?

here is a sample jsfiddle: https://jsfiddle.net/koh_edwin/pfeo3qbc/10/

i tried adding dashstyle

marker: {symbol:"square",radius:5, fillColor: '#FFFFFF',lineColor:"#F00000",
lineWidth: 2,
dashstyle:"shortdash"}

it does not have any effect
thanks,
edwin
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Marker line style

Hi there,

You did everything right, just make sure to apply the dashStyle property on the series, not on the marker.
DEMO: https://jsfiddle.net/BlackLabel/thb1syv4/
API Reference: https://api.highcharts.com/highcharts/s ... .dashStyle

Let me know once you'll need anything else,
Best regards!
Kamil Musiałowski
Highcharts Developer
koh_edwin
Posts: 24
Joined: Thu Aug 05, 2021 8:35 pm
Location: Toronto

Re: Marker line style

Hi,
sorry for not getting back to this as a few things came up. now i need to revisit this. i dont want the dash on the line series it self but on the marker. i did an implementation of markers using a combination of move and line:

Code: Select all

Highcharts.SVGRenderer.prototype.symbols.partialcoverage = function(x, y, w, h) {
				var dashWidth=2;
				var gapWidth=1;
				w=14;
				x=x-2
				y=y-2
				h=Math.floor(0.5*w);
				var pointArray=[]
				for(var currentPoint=x; currentPoint<= x+w; currentPoint+=dashWidth+gapWidth){
					pointArray.push('M',currentPoint, y, 'L', ((currentPoint+dashWidth>x+w)?x+w:currentPoint+dashWidth), y)
				}
				
				for(var currentPoint=x; currentPoint<= x+w; currentPoint+=dashWidth+gapWidth){
					pointArray.push('M',currentPoint, y+w, 'L', ((currentPoint+dashWidth>x+w)?x+w:currentPoint+dashWidth), y+w)
				}
				
				for(var currentPoint=y; currentPoint<= y+w; currentPoint+=dashWidth+gapWidth){
					pointArray.push('M', x, currentPoint, 'L', x, ((currentPoint+dashWidth>y+w)?y+w:currentPoint+dashWidth))
				}
				
				for(var currentPoint=y; currentPoint<= y+w; currentPoint+=dashWidth+gapWidth){
					pointArray.push('M', x+w, currentPoint, 'L', x+w, ((currentPoint+dashWidth>y+w)?y+w:currentPoint+dashWidth))
				}
				
				return pointArray
but the problem with this is i cant fill it as (i think there is no solid boundary to effect the fill.)

short of it is now i need the dash and a color fill
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Marker line style

Hi there,

You can try to play around with the Highcharts pattern-fill module.
Docs: https://www.highcharts.com/docs/chart-d ... tern-fills
Demo: https://jsfiddle.net/BlackLabel/wz9omnrs/

But in your case, I think that the easiest implementation would be to design your own markers outside the project, and then simply use them in your markers as a SVG icon.
Similar topic: viewtopic.php?f=9&t=48953

In case of any other questions, please do not hesitate to contact us,
Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”