Pending Review
Last Updated: 17 Sep 2021 05:12 by ADMIN
Nilton
Created on: 14 Sep 2021 15:18
Type: Feature Request
1
is there a way to have dashed lines using SeriesLine on ChartSeriesItem type area?
I'm using SeriesLine to render a border line on the area chart. Solid lines work just fine, but I can't figure out how to apply dashed lines.

What I want to achieve is something like:




What I have so far:




I just want to apply a dashed line on the the gray chart area.


The solid lines are applied using the following prop:
<ChartSeriesItem line={ style: 'smooth', color: '#888888', width: 2 } />

4 comments
Nilton
Posted on: 16 Sep 2021 15:22

Hello there, Stefan.

Yeah, the image I sent you was kind of misleading and for that I apologize. The white background will actually be a gray background.

For the time being I can use two series, one for the chart area without the line and one chart line with dashed line.

There is no sensitive information on this ticket, can you go ahead and create this feature request?

 

Thanks for the support!

ADMIN
Stefan
Posted on: 16 Sep 2021 04:37

Hello, Nilton,

Apologies for the misunderstanding, from the picture I assumed that this is a line Chart:

 

Indeed, currently, only the Line Chart can change the dash type. The line that is used as a border of the Area Chart can only be a solid one. If you wish to be able to change the type of that line, you can log a feature request here:

https://feedback.telerik.com/kendo-react-ui

Or if this ticket has no private information, I can directly transfer it to an official public feature request. This is how we are planning new features based on the community interest.

 

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Nilton
Posted on: 15 Sep 2021 13:38
Hello Stefan, thanks for the quick reply. 

It's already two separate series, The problem is that it's a area chart and the dashType can only be used when the chart series type is "line".
ADMIN
Stefan
Posted on: 15 Sep 2021 05:27

Hello, Nilton,

The dashed line can be set via the dashType prop:

https://www.telerik.com/kendo-react-ui-develop/components/charts/api/ChartSeriesItemProps/#toc-dashtype

Still, this will affect the entire series line.

If we have to show two different types, this will require rendering two separate lines, one solid and one with dashes. It can be set like this:

https://stackblitz.com/edit/react-xf7jvc?file=app/main.tsx

I hope this is helpful.

Regards,
Stefan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.