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

[Thomas]

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:

 

[Filip]

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