I currently have a donut chart with Value 0. The legend is showing up as normal but the chart is not being displayed.
Is there a way to display the chart as greyed out with 0 as series value ?
const standardChartData: ChartData[] = [
{
label: 'Legend 1',
value: 0
},
{
label: 'Legend 2',
value: 0
},
{
label: 'Legend 3',
value: 1
}
];
<ChartSeries>
<ChartSeriesItem
type="donut"
data={data}
categoryField="label"
autoFit={true}
field="value"
>
<ChartSeriesItemTooltip
visible={true}
render={renderTooltip}
></ChartSeriesItemTooltip>
<ChartSeriesLabels
color={theme.palette.common.black}
background="none"
font={chartSeriesFont}
/>
</ChartSeriesItem>
</ChartSeries>
position="custom"
offsetX={2}
offsetY={2}
visible={true}
labels={{
font: chartLegendFont
}}
height={100}
/>
Hi,
This is expected as the `ChartSeriesItems` are displayed based on their value.
You can loop over the series data, and set a variable (`hasData` in the below demo) to `true` when at least one item has a value, and `false` when all items have value 0. When the whole data has empty values, you can render dummy data instead with only one item. You can also change the color of the chart in that case using the seriesColor prop of the Chart component:
I hope this matches what you need, but please let us know if you have any further questions.
Regards,Wissam
Progress Telerik