is there a way to have dashed lines using SeriesLine on ChartSeriesItem type area?

Progress® KendoReact Feedback Portal

Create an account Log In

Request a Feature Report a Bug

Unplanned

Last Updated: 27 Jul 2023 14:42 by ADMIN

Nilton

Created on: 14 Sep 2021 15:18

Category: KendoReact

Type: Feature Request

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.