Pre loader

Change series colour on the overview chart

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



New to using Scichart JS, is it possible to change the series colour of the overview chart?

See screenshot, I have a FastColumnRenderableSeries as the main chart, and using FastMountainRenderableSeries for the overview. I would like to change the colour of the overview chart.

Tried setting the stroke colour etc, as in the example but can not seem to make it work.

Kind Regards,


  • You must to post comments
Best Answer

Yes, you can customise the appearance and data of the overview to anything you like

Take a look at this documentation page. This has some basic ways to change series colour of properties of the series/axis on the overview control

Modifying the Overview Chart

The SciChartOverview.create() method returns an instance of SciChartOverview, which exposes properties for accessing and customizing the underlying chart. The most important is overviewSciChartSurface which is the actual SciChartSurface used by the overview.

import { SciChartJSLightTheme } from 'scichart/Charting/Themes/SciChartJSLightTheme';
  import { Thickness } from 'scichart/Core/Thickness';
  // ...
  // add styling to the overview component
  overview.applyTheme(new SciChartJSLightTheme());
  // Default padding is 10
  overview.overviewSciChartSurface.padding = Thickness.fromNumber(0);
  // overviewXAxis provides a shortcut to overviewSciChartSurface.xAxes.get(0)
  overview.overviewXAxis.isVisible = true;
  overview.overviewXAxis.isInnerAxis = true;
  overview.overviewXAxis.drawMinorGridLines = false;
  overview.overviewXAxis.labelProvider.precision = 0;
  // Setting an id on the series makes it easier to get and customise it on the overview
  overview.overviewSciChartSurface.renderableSeries.getById("MainSeries").stroke = "#0a6fc2";

However, if you look at some of our examples, they contain some ways to customise the overview a bit more deeply.

For example, the JavaScript Candlestick Chart example. This shows a method for how we can actually instantiate different series types for the data on the overview, or even show or hide certain series.

Check out the part in the example source code where it sets the getOverviewSeries function

    // Add Overview chart. This will automatically bind to the parent surface
    // displaying its series. Zooming the chart will zoom the overview and vice versa
    const overview = await SciChartOverview.create(sciChartSurface, divOverviewId, {
        theme: appTheme.SciChartJsTheme,
        transformRenderableSeries: getOverviewSeries

// Override the Renderableseries to display on the scichart overview
const getOverviewSeries = (defaultSeries: IRenderableSeries) => {
    if (defaultSeries.type === ESeriesType.CandlestickSeries) {
        // Swap the default candlestick series on the overview chart for a mountain series. Same data
        return new FastMountainRenderableSeries(defaultSeries.parentSurface.webAssemblyContext2D, {
            dataSeries: defaultSeries.dataSeries,
            fillLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
                { color: appTheme.VividSkyBlue + "77", offset: 0 },
                { color: "Transparent", offset: 1 }
            stroke: appTheme.VividSkyBlue
    // hide all other series
    return undefined;

Normally when an overview is created, every series on the main chart gets mirrored on the overview chart. You can intercept this with getOverviewSeries(). For each series passed in, decide if you want to create a different series type, or return undefined if you want to hide it.

Let me know if this helps!

Best regards

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.