Is it possible to display an empty pie chart when no data is available

1 Answer 248 Views
Charts
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Tejas asked on 20 Oct 2023, 06:13 AM
I am using a Kendo React pie chart, but when there is no data, the chart displays a black screen instead of an empty pie chart. Please provide an example of how to show an empty pie chart."

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 23 Oct 2023, 05:04 PM

Hello, Tejas,

You can visualize an empty chart by having one additional series with static value and showing it as a colored circle when needed. You can show it conditionally, only when the chart is empty, disabling its labels, tooltips and highlight functionality in a similar way:

  <Chart onSeriesHover={onSeriesHover}>
    <ChartSeries>
      ...
      <ChartSeriesItem
        type="pie"
        name={'Empty'}
        visible={series.length <= 0}
        data={[{ value: 1, color: 'grey' }]}
        field="value"
        colorField={'color'}
        labels={{
          visible: false,
        }}
      />
    </ChartSeries>
  </Chart>

I hope this helps but let me know if I can assist you any further with that.

Regards,
Vessy
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
Asked by
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Vessy
Telerik team
Share this question
or