Column Chart with RangeNavigator

[Albert K]

Hi,

I have a column chart with two series.  The data is across 3 days and the have 10 data points per day (X-axis IntervalType is datetime).   Is it possible to use RangeNavigator?  And if not, is it possible to default show the one day (24 hours) then have options to move to the next day?.

Thank you.

[Nishanthi Panner Selvam]

Albert,

Greetings from Syncfusion.

We have created an Angular sample that has two column series and a RangeNavigator. In this sample, we've used data spanning three days, with ten data points for each day. The RangeNavigator allows you to select a specific range within this data. Changed event facilitates dynamic interaction between the RangeNavigator and the chart. It ensures that the chart responds to changes in the selected range by adapting its zoom and data display, enhancing your ability to explore and analyze data interactively..

For instance, you can zoom in on a single day , and the chart will display the data for that day. Similarly, you can expand the selected range to encompass multiple days, and the chart will adjust accordingly to show the data for that extended period.

We have attached code-snippet, sample and screenshot for your reference.

Code-snippet:

   public changed(args: IChangedEventArgs): void {

        this.Chart.primaryXAxis.zoomFactor = args.zoomFactor;

        this.Chart.primaryXAxis.zoomPosition = args.zoomPosition;

        this.Chart.dataBind();

    }

Screenshot:

Sample: https://stackblitz.com/edit/angular-m9scus-wus5pa?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Findex.html

Please let us know if the above sample meets your requirement. If not, let us know your exact requirement. It will be helpful for us to analyze further and assist you better.

Regards,

Nishanthi