Skip to main content

SubChart Sub Surface Transparency

The SubCharts API allows you to place nested charts (charts within charts). In the previous example What is the SubCharts API we covered how to add SubCharts to a SciChartSurface, and also how to position them in SubCharts Positioning.

In this example we're going to show the difference between SciChartSubSurface.isTransparent📘 true and false.

// Demonstrates the isTransparent property in SubCharts
const {
    SciChartSurface,
    SciChartSubSurface,
    NumericAxis,
    SciChartJsNavyTheme,
    Rect,
    ECoordinateMode,
    FastLineRenderableSeries,
    XyDataSeries,
    MouseWheelZoomModifier,
    ZoomPanModifier
} = SciChart;

// or, for npm, import { SciChartSurface, ... } from "scichart"

// Create a parent (regular) SciChartSurface which will contain the sub-chart
const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
    theme: new SciChartJsNavyTheme(),
    title: "Parent Chart",
    titleStyle: { fontSize: 22, color: "#eeeeee" }
});

// Create X,Y axis on the parent chart and programmatically zoom into part of the data
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

// Add some random data to the parent chart so it can be shown through the subchart
sciChartSurface.renderableSeries.add(
    new FastLineRenderableSeries(wasmContext, {
        strokeThickness: 3,
        stroke: "teal",
        dataSeries: new XyDataSeries(wasmContext, { xValues, yValues })
    })
);

sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
sciChartSurface.chartModifiers.add(new ZoomPanModifier());

// Add a Sub-Charts to the main surface with isTransparent=true
const subChart1 = SciChartSubSurface.createSubSurface(sciChartSurface, {
    position: new Rect(0.02, 0.05, 0.4, 0.4),
    isTransparent: true,
    canvasBorder: { border: 3, color: "#77777777" },
    title: "SubChart with isTransparent True",
    titleStyle: { fontSize: 16, color: "#eeeeee99" }
});

// Add x,y axis to the subchart
subChart1.xAxes.add(new NumericAxis(wasmContext));
subChart1.yAxes.add(new NumericAxis(wasmContext));

// Add some random data to the sub chart so it can be shown through the subchart
subChart1.renderableSeries.add(
    new FastLineRenderableSeries(wasmContext, {
        strokeThickness: 5,
        stroke: "Orange",
        dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues1 })
    })
);

// Add a Sub-Charts to the main surface with isTransparent=false
const subChart2 = SciChartSubSurface.createSubSurface(sciChartSurface, {
    position: new Rect(0.02, 0.5, 0.4, 0.4),
    isTransparent: false,
    canvasBorder: { border: 3, color: "#77777777" },
    title: "SubChart with isTransparent false",
    titleStyle: { fontSize: 16, color: "#eeeeee99" }
});

// Add x,y axis to the subchart
subChart2.xAxes.add(new NumericAxis(wasmContext));
subChart2.yAxes.add(new NumericAxis(wasmContext));

// Add some random data to the sub chart so it can be shown through the subchart
subChart2.renderableSeries.add(
    new FastLineRenderableSeries(wasmContext, {
        strokeThickness: 5,
        stroke: "Orange",
        dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues1 })
    })
);

This results in the following output:

The example shows that the Line Series on the parent chart will be visible underneath the sub-surface when isTransparent = true. This behavior could be changed using I2DSubSurfaceOptions.isTransparent📘 option passed to SciChartSubSurface.createSubSurface()📘 or via the SciChartSubSurface.isTransparent📘 property.

See Also​