Drilldown on an area chart

[Alex]

This doesn't work with the drilldown example adapted from the KendoReact example of the series graph because having a drilldown factory on each ChartSeriesItem means they can't interact with each other, you need it one layer higher. The only thing I can think to do is to use external variables in React state to track which drilldown you have entered and hide the other ChartSeriesItems

Drilldowns are created by using the props drilldownSeriesFactory and drilldownField on a ChartSeriesItem. When creating a series graph you can all your data and multiple categories under one <ChartSeriesItem /> component. When you want to create an area chart (or line chart) you need to have multiple ChartSeriesItem components, one per data series.

Is there a way to do this purely using KendoReact Charts?

Code below to add some context

<Chart drilldownState={drilldownState} onDrilldown={handleDrilldown}>
    <ChartTitle text="Baseline 06/2024" />
    <ChartCategoryAxis>
         <ChartCategoryAxisItem categories={categories} title={{ text: 'Months' }} baseUnitStep={"auto"} />
    </ChartCategoryAxis>
    <ChartSeries >
        {/* <ChartSeriesItem
                        type="area"
                        stack={true}
                        data={availabilityData}
                        name="Availability"
                        field="value"
                        drilldownField="type"
                        drilldownSeriesFactory={DrilldownByAvailabilitySeries}
           /> */}
          <ChartSeriesItem
                        type="area"
                        data={unavailabilityData}
                        name="Unavailability"
                        field="value"
                        drilldownField="type"
                        drilldownSeriesFactory={DrilldownByAvailabilitySeries}
           />
    </ChartSeries>
    <ChartLegend position="bottom" />
</Chart>

[Filip]

Hi,  Alex,

Achieving the behaviour purely with the Charts is not feasible, because the component does not natively support managing interactions or drilldowns across multiple components on a shared higher level. 

For the scenario at hand I can recommend using state and ReactContext or a similar state sharing mechanism and the approach that you have discovered is indeed valid.

I hope this helps, but please let me know in case further assistance is required.

Regards,
Filip
Progress Telerik