SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components


I have a WPF app using the MVVM pattern. I am using an XY line chart with date-based data. I was previously using a DateTimeAxis to display the data and had the VisibleRange property bound to a DateRange property in my view model. The app has a feature where the user can click buttons to quickly select a visible range i.e. 1 day, 1 month, 6 months, etc. I was just setting the value of the visible range property in my view model to update the chart. That was all working great.

But the chart is showing financial data, so I needed to switch over to the CategoryDateTimeAxis to remove gaps in the data. Now my VisibleRange binding no longer works. I get an error saying “Object must be of type DateTime”. I have read other posts and understand that this is because the CategoryDateTimeAxis uses an IndexRange instead of a DateRange for its VisibleRange.

My question is: is there a way for me to still set the desired visible range using date values in my view model and have it converted to an IndexRange so the chart will show the correct data?


  • You must to post comments

Hi there,

There is, but it’s a little bit tricky in MVVM. You need to use the API to convert between pixel and data coordinates on an Axis.

Here’s an excerpt from our docs:

// Get coordinate from CategoryDateTimeAxis
CategoryDateTimeAxis catAxis = new CategoryDateTimeAxis();
ICategoryCoordinateCalculator coordCalc = catAxis.GetCurrentCoordinateCalculator() as ICategoryCoordinateCalculator;
int index = coordCalc.TransformDataToIndex(new DateTime(2015, 01, 01));
double pixelCoord = coordCalc.GetCoordinate(index);

Specifically, take a look at the method TransformdataToIndex. This, well, transforms an DateTime value to Index. There is also an inverse method, TransformIndexToData.

Getting this into the viewmodel is the hard part as you need an axis instance. I would suggest instead either (easy) handling the click events to change time-scale in code-behind, or, (slightly harder) pass the SciChartSurface.XAxis as a command parameter in your button command to ViewModel.

Hope this helps,

Best regards,

  • You must to post comments

I am passing the axis as a command parameter to my view model and that is working. Thanks!

  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.