Canvas.Views.Web 3.0.8

dotnet add package Canvas.Views.Web --version 3.0.8
NuGet\Install-Package Canvas.Views.Web -Version 3.0.8
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Canvas.Views.Web" Version="3.0.8" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Canvas.Views.Web --version 3.0.8
#r "nuget: Canvas.Views.Web, 3.0.8"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install Canvas.Views.Web as a Cake Addin
#addin nuget:?package=Canvas.Views.Web&version=3.0.8

// Install Canvas.Views.Web as a Cake Tool
#tool nuget:?package=Canvas.Views.Web&version=3.0.8

Canvas - Financial Charts

The fastest charting web control targeting primarily Blazor, both Server Side and Web Assembly, and to some extent ASP.NET MVC. This charting library was designed for Web, but it can also be used in Desktop apps via Web View.

The main purpose of this library is to be used as a real-time charting tool for financial applications that require frequent updates, 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 fast and flexible enough for my needs, so created my own.

  • Samples are here
  • Example of usage in real life is a trading terminal here

Status

Install-Package Canvas.Views.Web

GitHub Workflow Status (with event) GitHub GitHub

Implementations

Currently available controls.

  • Engine - base control exposing drawing context for various frameworks, like GDI or SkiaSharp
  • CanvasEngine - a wrapper around SkiaSharp and Open GL

To add different view types, e.g. GDI+, Direct 2D, Win UI, Open GL, implement IEngine interface.

Chart Types

At the moment, the library supports the following chart types.

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

To add new chart types, e.g. Error Bars or Bubbles, implement IShape interface.

Sample

The simplest data format is a list of IShape models with a X and Y properties.


<CanvasView @ref="View"></CanvasView>

@code
{
  public CanvasView View { get; set; }

  protected override async Task OnAfterRenderAsync(bool setup)
  {
    if (setup)
    {
      var generator = new Random();
      var points = Enumerable.Range(1, 1000).Select(i => new BarShape 
      { 
        X = i, 
        Y = generator.Next(-5000, 5000) 
     
     }).ToList();
      
      var composer = new Composer
      {
        Name = "Demo",
        Items = points
      };

      await View.Create<CanvasEngine>(engine => composer);

      composer.Update();
    }

    await base.OnAfterRenderAsync(setup);
  }
}

By default, the axis X is used as an index that picks data points from the source list and axis Y is a value that represents the actual value of each data point on the vertical scale.

Preview

alternate text is missing from this package README image

Synchronization

To simplify synchronization, you can use IGroupShape model instead of simple IShape. This model allows grouping series for each chart by single timestamp, so you could display candles, lines, and other series on the same chart.

Item = new 
{
  Groups = new GroupShape
  {
    ["Price Area"] = new Dictionary<string, GroupShape>
    {
      Groups = new GroupShape
      {
        ["Price Series"] = new CandleShape(),
        ["Arrow Series"] = new ArrowShape()
      }
    },
    ["Indicator Area"] = new Dictionary<string, GroupShape>
    {
      Groups = new GroupShape
      { 
        ["Bar Series"] = new BarShape() 
      }
    }
  }
}

Pan and Zoom

The chart is 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 right, 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

Roadmap

To increase performance, the chart is split into pieces and each piece is using its own thread, so UI is never blocked even while rendering 100K samples. To increase performance even further, downsampling could be implemented, e.g. when number of points is greater that width of the screen in pixels, because all points wouldn't fit on the screen anyway.

Product Compatible and additional computed target framework versions.
.NET net7.0 is compatible.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
3.0.8 67 3/25/2024
3.0.7 75 3/24/2024
3.0.6 67 3/20/2024
3.0.5 70 3/18/2024
3.0.4 71 3/18/2024
3.0.3 80 3/18/2024
3.0.1 73 3/17/2024
3.0.0 81 3/15/2024
2.0.7 75 3/14/2024
2.0.6 71 3/14/2024
2.0.5 63 3/7/2024
2.0.3 92 3/3/2024
2.0.2 71 3/3/2024
2.0.1 72 3/1/2024
2.0.0 71 2/26/2024
1.9.9 60 2/25/2024
1.9.8 72 2/24/2024
1.9.6 70 2/17/2024
1.9.5 70 2/17/2024
1.9.4 61 2/15/2024
1.9.3 98 2/11/2024
1.9.2 55 2/11/2024
1.9.1 61 2/11/2024
1.9.0 70 2/9/2024
1.8.9 73 2/8/2024
1.8.8 83 2/8/2024
1.8.7 65 2/5/2024
1.8.6 64 2/5/2024
1.8.5 89 1/28/2024
1.8.4 67 1/26/2024
1.8.3 69 1/26/2024
1.8.2 64 1/25/2024
1.8.1 79 1/18/2024
1.8.0 215 5/29/2023
1.7.9-prerelease 131 3/12/2023
1.7.8-prerelease 147 3/5/2023
1.7.7-prerelease 120 2/24/2023
1.7.6-prerelease 147 2/20/2023
1.7.5-prerelease 126 2/14/2023
1.7.1-prerelease 144 2/9/2023
1.7.0-prerelease 131 2/5/2023
1.6.7-prerelease 143 2/4/2023
1.6.6-prerelease 158 2/1/2023
1.6.5-prerelease 197 1/12/2023
1.6.4-prerelease 127 1/8/2023
1.6.3-prerelease 148 12/18/2022
1.6.2-prerelease 143 12/4/2022
1.6.1-prerelease 159 11/24/2022
1.6.0-prerelease 152 11/19/2022
1.5.9-prerelease 153 11/6/2022
1.5.6-prerelease 163 11/3/2022
1.5.5-prerelease 133 11/2/2022
1.5.3-prerelease 138 10/29/2022
1.5.2-prerelease 147 10/2/2022
1.5.1-prerelease 158 10/2/2022
1.5.0-prerelease 154 9/21/2022
1.4.0-prerelease 156 8/7/2022
1.3.9-prerelease 174 8/7/2022
1.3.8-prerelease 182 8/7/2022
1.3.7-prerelease 151 8/2/2022
1.3.6-prerelease 140 8/1/2022
1.3.5-prerelease 143 8/1/2022
1.3.4-prerelease 144 8/1/2022
1.3.3-prerelease 145 8/1/2022
1.3.2-prerelease 155 7/29/2022
1.3.1-prerelease 174 7/21/2022
1.3.0-prerelease 161 7/13/2022
1.2.9-prerelease 171 7/11/2022
1.2.8-prerelease 154 7/9/2022
1.2.7-prerelease 159 7/9/2022
1.2.6-prerelease 180 7/7/2022
1.2.5-prerelease 164 7/1/2022
1.2.4-prerelease 190 5/8/2022
1.2.3-prerelease 173 4/18/2022
1.2.2-prerelease 162 4/17/2022
1.2.1-prerelease 182 4/16/2022
1.2.0-prerelease 169 4/16/2022
1.1.9-prerelease 174 4/15/2022
1.1.8-prerelease 160 4/15/2022
1.1.7-prerelease 172 4/14/2022
1.1.6-prerelease 172 4/12/2022
1.1.5-prerelease 158 4/9/2022
1.1.4-prerelease 158 4/7/2022
1.1.3-prerelease 190 4/6/2022
1.1.2-prerelease 142 4/5/2022
1.1.1-prerelease 151 4/4/2022
1.1.0-prerelease 165 4/3/2022
1.0.9-prerelease 165 4/3/2022
1.0.8-prerelease 177 4/3/2022
1.0.7-prerelease 159 4/3/2022
1.0.6-prerelease 169 4/3/2022
1.0.5-prerelease 176 3/26/2022
1.0.0-prerelease 170 3/24/2022