Canvas 1.0.1-RC

Generic real-time charts for WPF apps with built-in pan and zoom support. Financial and stock-trading charts.

This is a prerelease version of Canvas.
Install-Package Canvas -Version 1.0.1-RC
dotnet add package Canvas --version 1.0.1-RC
<PackageReference Include="Canvas" Version="1.0.1-RC" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Canvas --version 1.0.1-RC
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: Canvas, 1.0.1-RC"
#r directive can be used in F# Interactive, C# scripting and .NET Interactive. Copy this into the interactive tool or source code of the script to reference the package.
// Install Canvas as a Cake Addin
#addin nuget:?package=Canvas&version=1.0.1-RC&prerelease

// Install Canvas as a Cake Tool
#tool nuget:?package=Canvas&version=1.0.1-RC&prerelease
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

Canvas and Open GL Stock and Financial Charts

Generic real-time charts for WPF apps.

The main purpose of this app is to be used as a charting tool for real-time financial applications, e.g. backtesters for trading strategies.
Here is the most comprehensive guide dedicated to charting in .NET that I have seen so far.
Nevertheless, trying various options from that guide I wasn't able to find anything flexible enough for my needs, so created my own.

Drawing Methods

Currently available controls.

  • CanvasControl - extended WPF Canvas control exposing DrawingContext used with Shapes and Geometries
  • CanvasImageControl - a wrapper around SkiaSharp and Open GL

In order to add a different type of panel, e.g. GDI+ or Direct2D, you need to implement ICanvasControl interface.

Chart Types

At the moment, there are four built-in chart types.

  • Line - line
  • Bar - polygon
  • Area - polygon
  • Candle - OHLC box, a mix of a line and a rectangle polygon

If there is a need to create a new chart type, then you need to implement IShape interface.

Pan and Zoom

The chart is completely data-centric, thus in order to scale the chart you need to change the data source.
By default, the chart displays last 100 data points, as defined in IndexCount property.

MinIndex = Items.Count - IndexCount
MaxIndex = Items.Count

To pan the chart to the left, subtract arbitrary value from both MinIndex and MaxIndex.

MinIndex -= 1
MaxIndex -= 1

To pan the chart to the left, do the opposite.

MinIndex += 1
MaxIndex += 1

To zoom in, increase MinIndex and decrease MaxIndex to decrease number of visible points.

MinIndex += 1
MaxIndex -= 1

To zoom out, do the opposite.

MinIndex -= 1
MaxIndex += 1

Data source sample

To simplify sycnhronization of multiple charts, data source has format of a list where each entry point has a time stamp and a set of Areas and Series that will be rendered in the relevant viewport.

[
  DateTime
  {
    Area A
    {
      Line Series => double,
      Candle Series => OHLC
    },
    Area B 
    {
      Line Series => double,
      Line Series => double
    },
    Area C 
    {
      Bar Series => double
    }
  }, 
  DateTime,
  DateTime,
  DateTime
]

  • Area is a viewport, an actual chart, each viewport can show several types of series, e.g. a mix of candles and lines.
  • Series is a single chart type to be displayed in the viewport, e.g. lines.
  • Model is a data point of dynamic type, can accept different type of inputs, e.g. double or OHLC box.

At this moment, Painter supports only horizontal orientation, so the axis X is used as an index scale that picks data points from the source list and axis Y is a value scale that represents the actual value of each data point.

Preview

Canvas and Open GL Stock and Financial Charts

Generic real-time charts for WPF apps.

The main purpose of this app is to be used as a charting tool for real-time financial applications, e.g. backtesters for trading strategies.
Here is the most comprehensive guide dedicated to charting in .NET that I have seen so far.
Nevertheless, trying various options from that guide I wasn't able to find anything flexible enough for my needs, so created my own.

Drawing Methods

Currently available controls.

  • CanvasControl - extended WPF Canvas control exposing DrawingContext used with Shapes and Geometries
  • CanvasImageControl - a wrapper around SkiaSharp and Open GL

In order to add a different type of panel, e.g. GDI+ or Direct2D, you need to implement ICanvasControl interface.

Chart Types

At the moment, there are four built-in chart types.

  • Line - line
  • Bar - polygon
  • Area - polygon
  • Candle - OHLC box, a mix of a line and a rectangle polygon

If there is a need to create a new chart type, then you need to implement IShape interface.

Pan and Zoom

The chart is completely data-centric, thus in order to scale the chart you need to change the data source.
By default, the chart displays last 100 data points, as defined in IndexCount property.

MinIndex = Items.Count - IndexCount
MaxIndex = Items.Count

To pan the chart to the left, subtract arbitrary value from both MinIndex and MaxIndex.

MinIndex -= 1
MaxIndex -= 1

To pan the chart to the left, do the opposite.

MinIndex += 1
MaxIndex += 1

To zoom in, increase MinIndex and decrease MaxIndex to decrease number of visible points.

MinIndex += 1
MaxIndex -= 1

To zoom out, do the opposite.

MinIndex -= 1
MaxIndex += 1

Data source sample

To simplify sycnhronization of multiple charts, data source has format of a list where each entry point has a time stamp and a set of Areas and Series that will be rendered in the relevant viewport.

[
  DateTime
  {
    Area A
    {
      Line Series => double,
      Candle Series => OHLC
    },
    Area B 
    {
      Line Series => double,
      Line Series => double
    },
    Area C 
    {
      Bar Series => double
    }
  }, 
  DateTime,
  DateTime,
  DateTime
]

  • Area is a viewport, an actual chart, each viewport can show several types of series, e.g. a mix of candles and lines.
  • Series is a single chart type to be displayed in the viewport, e.g. lines.
  • Model is a data point of dynamic type, can accept different type of inputs, e.g. double or OHLC box.

At this moment, Painter supports only horizontal orientation, so the axis X is used as an index scale that picks data points from the source list and axis Y is a value scale that represents the actual value of each data point.

Preview

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version History

Version Downloads Last updated
1.0.1-RC 61 3/13/2021
1.0.0-RC 81 3/9/2021