Dashed Line Chart

[Former Member]

Hi,

Is it possible to make the Line Chart dashed using CSS or using any other approach?

Thanks,

Anders

[Former Member · Accepted solution]

Hi Anders,

you can use CSS to get a dashed line, for example:

svg g.v-m-plot g.v-datalines path.v-lines.v-morphable-line {stroke-dasharray: 5,5;}

some useful sites:

Fills and Strokes - SVG | MDN

stroke-dasharray property (Internet Explorer)

Regards,

David

[Former Member · Accepted solution]

Awesome thanks!

Is it possible to have one line dashed and one normal line in the same graph?

Thanks,

Anders

[Former Member · Accepted solution]

Hi Anders,

yes it is possible by adjusting the css selectors with :nth-child(). Just use a css selector which targets either your first or second line (if you have two lines), so you would use one of the following css lines:

svg g.v-m-plot g.v-datalines g.v-axis1 path:nth-child(1).v-lines.v-morphable-line {stroke-dasharray: 5,5;}
svg g.v-m-plot g.v-datalines g.v-axis1 path:nth-child(2).v-lines.v-morphable-line {stroke-dasharray: 2,8;}

Here a screenshot which shows what the css selectors are selecting (this is not the only way to write the selectors, just one way):

My chart type is: "Line" and after applying both CSS definitions, for both Lines, the chart looks like this now (use only one css from my example instead of both to make only one line dashed):

Regards,

David

[Former Member]

Hi,

I can not find any CSS Option , If you find any please share.

But there is Workaround ( Lots of Donkey Work Kind & Not reasonable ).

add grid    20 Col & 1 row   with fix Width & Height .

Add Blank Text in Each Grid (Where Line Appear).

Set following CSS Style for each text in it.

border-right:thick double #ff0000;(as per requirement set color as background color of line chart ).

Opacity:0%;

If your showing minor axis you will have to set text in grid accordingly.