How to make all grid lines and axes disappear on a Chart component without categories?

1 Answer 88 Views
Charts Labels  Styling
Thomas
Top achievements
Rank 1
Iron
Thomas asked on 04 Dec 2023, 07:42 PM | edited on 04 Dec 2023, 07:43 PM

I need to make all grid lines and axes disappear on a Chart using ChartSeries and not ChartCategories. I realize the standard answer is to set line visibility to false on ChartCategoryAxisItem, but for technical purposes this chart needs to not utilize categories.

 

The code:

<Chart style={{ height: 179, background: "#DDE9ED" }}>
<ChartArea background="#DDE9ED" />
<ChartSeries>
<ChartSeriesItem
data={series}
gap={1} type="bar" field="data" categoryField="name" color="color"
labels={{ visible: true, font: "14", background: "#DDE9ED" }}
/>
</ChartSeries>
</Chart>


How the chart currently looks:
How we want it to look:

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Filip
Telerik team
answered on 06 Dec 2023, 03:34 PM

Hi, Thomas,

Currently removing the axis can be achieved only by setting `visible` to false for the `ChartCategoryAxisItem` and the grid lines can be removed via `majorGridLines`.  Even if the Chart doesn't need to display any categories, you can still utilize ChartCategoryAxisItem without specifying the categories and having them displayed. I have created an example that showcases this approach here:

https://stackblitz.com/edit/react-8e5nau-8cnzds?file=app%2Fmain.tsx

I hope this helps but please let us know if further assistance is required.

Regards,
Filip
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Tags
Charts Labels  Styling
Asked by
Thomas
Top achievements
Rank 1
Iron
Answers by
Filip
Telerik team
Share this question
or