Pre loader

Draw on Canvas in CustomAnnotation

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums



Is it possible to access the native canvas context to draw on the javascript chart surface? like for example, draw a circle or arc using HTML5 canvas apis.


  • You must to post comments

Thank you, I was trying to recreate the market profile renderable series on JS. Was wondering if it should be a custom annotation where users can drag across a bunch of bars and then we calc/render the profile. or it could be a custom series by itself extended from the base renderable series?

  • Andrew Burnett-Thompson
    Hi Mason, if you’re trialling from a company & intent to buy we can schedule a discussion with our dev team as we might have some ideas for you. There’s an API in-progress now called subcharts (charts in charts) which will be able to do this. Creating a demo with volume profile in scichart.js is on our task board. The placement of the volume profile is the hard part but actual rendering / drawing of it not so hard.
  • mason jackson
    Hello Andrew, That is the intent. Currently evaluating the capabilities of scichart JS and one of the key requirements is to be able to render volume profile and market profile on a JS chart.
  • mason jackson
    @andrew what is the planned ETA for subcharts? will it be available in 3.0 js
  • You must to post comments

Hi Mason

We don’t use HTML5 canvas for drawing on SciChartSurface, we are using our own WebGL graphics engine.

There are some functions exposed for example:

  • You can create a Custom Annotation which uses SVG and can be placed at an X1 Y1 location on the chart
  • You can create a custom pointmarker which uses HTML5 canvas to draw a shape once, then repeats that shape for each X Y point on a scatter chart

What was it you wanted to achieve? (do you have some more info about requirements).

It would not be difficult for us to expose more of the API allowing you to draw custom shapes with our WebGL engine. For example we have the Custom Series API in other scichart platforms which uses a WebGL render context. It would be helpful to know what you want to draw and why

Best regards

  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.