Line style for line charts

[EmaGht]

I'm submitting a ... (check one with "x")

• bug report - search github for a similar issue or PR before submitting
• feature request
• support request - use StackOverflow (add the ngx-charts tag) or the gitter chat for support questions

Current behavior
Line charts (as far as i could see) has only one default appearance for every line (continuous)

Expected behavior
Would be nice to be able to set line appearance to something like "dashed" or similar, bonus points for setting just a portion of the data as "dashed"

What is the motivation / use case for changing the behavior?
Have a better visual of the resulting chart, for example to recognize real values against estimated values.
Something like this: http://www.andypope.info/ngs/ng45.gif

[nikkelj]

It should also support different marker styles to overlay on the line, similar to matlab, matplotlib, etc. Ie, small dots, asterisks, plus, circle, box, etc etc.

[nikkelj]

It should also support a way to control the size of said markers, and the lines

[DmitryEfimenko]

is there any workaround?

[comfortme]

you can make series dashed with stroke-dasharray property with css
but in order to have a series partly dashed and partly solid, you have to split series into multiple series i guess.

[jrhite]

@comfortme thanks for the tip. I'm just looking to style a line completely as dashed, but if I have a series of 4 lines and need only one of them to be dashed which selector would I use to have stroke-dasharray applied to that specific line I want dashed?

I'd like to something like below, but I have no way (at least that I know of) to target the specific line.

And ideas?

Thanks!

<g class="line-series ng-tns-c20-23" ngx-charts-line="" ng-reflect-path="M263.2335061,401.7777777777777" ng-reflect-stroke="#3f51b5" ng-reflect-data="[object Object]" ng-reflect-animations="true">
   <path class="line ng-trigger ng-trigger-animationState" stroke-width="1.5px" stroke="some-stroke-color" stroke-dasharray="4 1" ......>
   </path>
</g>

[comfortme]

hmm :nth-child maybe?

[ljisman]

@jrhite Any update on this?

[jrhite]

I used a combination of the two tips given to me above, stroke-dasharray property with nth-child by comfortme. It worked well.

// here 3 is the specific line I want to be dashed
g.line-chart > g:last-of-type > g:nth-child(3) g.line-series > path {
    stroke: #72b4ec;
    stroke-dasharray: 6 10;
}

[lukekroon]

@jrhite where did you put that css to change the line chart ?

[chriszrc]

I used a similar css approach for getting other shapes besides circles in the bubble chart, but it still feels very hacky (partially because we can't target these components with the component css, since it's outside the angular css scope). Seems like a very common requirement to be able to add a css class to lines or points in a series, seems like this could really be a powerful change that could enable a lot more chart flexibility-

#998 (comment)

@lukekroon I had to put it in the global scss file, since otherwise it can't target these components outside of the angular component scope-

[gunveer-ppp]

Any update on setting just a portion of the line data as "dashed"? or any workaround available for this task?

[JUBINBIJU]

I used a combination of the two tips given to me above, stroke-dasharray property with nth-child by comfortme. It worked well.

// here 3 is the specific line I want to be dashed
g.line-chart > g:last-of-type > g:nth-child(3) g.line-series > path {
    stroke: #72b4ec;
    stroke-dasharray: 6 10;
}

Hai,
where did you add this code, in the global style.scss?
Cuz I have been trying to achieve this in different ways but nothing seems to work out.

[chriszrc]

@JUBINBIJU yes, in the global style.scss - "I had to put it in the global scss file" - #876 (comment)

[JUBINBIJU]

@JUBINBIJU yes, in the global style.scss - "I had to put it in the global scss file" - #876 (comment)

@chriszrc I added it in style.scss but still the chart remains the same. What might be the possible issue?
This is the chart i made with data that makes 3 lines

<ngx-charts-line-chart
[view]="[500, 400]"
[results]="lineChartDataset"
[xAxisLabel]="'x-axis'"
[yAxisLabel]="'y-axis'"
[legend]="true"
[showXAxisLabel]="true"
[showYAxisLabel]="true"
[xAxis]="true"
[yAxis]="true">

[chriszrc]

@JUBINBIJU add a codesandbox, impossible to tell without it, you can start off something like this - https://codesandbox.io/s/angular-ngx-charts-e7hx2