Another feature of the SubChartsAPI is an ability to add custom HTML content around a sub-chart.

This is achieved by composing following required HTML elements:

• chart-container - the outermost element that holds a main chart and custom html for sub-charts.
• scichart-root-element - the element used to create the main surface.
• sub-chart-container - the element which will be displayed at the sub-surface position. It will have the sub-surface and custom html inside; more sub-chart containers could be added if there are many sub-charts.
• chart-html-section - the element which will hold the actual custom HTML content; sections are placed to the sides of a sub-surface accordingly to their class names: left-section, right-section, top-section, bottom-section.

Here is the setup required for the example: We will start from adding HTML markup which corresponds to the descriptions above:

<div class="chart-container">
    <!-- the Div where the SciChartSurface will reside -->
    <div id="scichart-root-1" class="scichart-root-element"></div>
    <!-- the div where a custom HTML elements could reside, its size and position will be managed by SciChartSurface -->
    <div id="sub-chart-container-id-1" class="sub-chart-container">
        <div class="chart-html-section left-section">A left section of the sub-chart.</div>
        <div class="chart-html-section right-section">Right Section</div>
        <div class="chart-html-section top-section">Top Section</div>
        <div class="chart-html-section bottom-section">Bottom Section</div>
    </div>
</div>

Where the CSS class definitions are as follows:

.chart-container {
    position: relative;
    max-width: 1080px;
    max-height: 720px;
}
.scichart-root-element {
    position: relative;
    width: 100%;
    height: 100%;
}
.sub-chart-container {
    position: absolute;
}
.chart-html-section {
    pointer-events: all;
    position: absolute;
}
.left-section {
    width: 100px;
    height: 100%;
    background-color: rgba(212, 245, 66, 0.5);
}
.right-section {
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    background-color: rgba(226, 78, 14, 0.5);
}
.top-section {
    top: 0;
    width: calc(100% - 200px);
    height: 50px;
    position: absolute;
    left: 100px;
    background-color: rgba(236, 66, 245, 0.5);
}
.bottom-section {
    bottom: 0;
    width: calc(100% - 200px);
    height: 50px;
    position: absolute;
    left: 100px;
    background-color: rgba(66, 245, 224, 0.5);
}

Now let's update the chart setup from the basic example and specify that we want to use a custom HTML content container.

For this we will pass the id of the container via I2DSubSurfaceOptions.subChartContainerId property. So, in this case subChartDivElementId is "sub-chart-container-id-1" Also we can specify class names that will identify the sections of the container.

// Add a sub-chart to the main surface
const subChartSurface = sciChartSurface.addSubChart({
    position: new Rect(0, 0, 0.5, 0.5),
    isTransparent: false,
    subChartContainerId: subChartDivElementId,
});
// optionally specify class names of section elements within the sub-chart container
subChartSurface.topSectionClass = 'top-section';
subChartSurface.leftSectionClass = 'left-section';
subChartSurface.bottomSectionClass = 'bottom-section';
subChartSurface.rightSectionClass = 'right-section';

const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(divElementId, {
    subCharts: [
        {
            surface: {
                position: new Rect(0, 0, 0.5, 0.5),
                subChartContainerId: subChartContainer,
            },
        },
    ],
});
const [subChartSurface] = sciChartSurface.subCharts;
// specify class names of section elements within the sub-chart container
subChartSurface.topSectionClass = 'top-section';
subChartSurface.leftSectionClass = 'left-section';
subChartSurface.bottomSectionClass = 'bottom-section';
subChartSurface.rightSectionClass = 'right-section';

As a result the container will be drawn with the position and sizes specified when creating the sub-surface, while the sub-surface itself will shrink accordingly to the space occupied by the custom content sections.

Alternatively, we can pass a reference to the sub-chart container element. For example, if we have the reference:

// Get subchart container
const subChartContainer = document.getElementById(subChartDivElementId);

Then we can simply pass it instead of the ID:

const subChartSurface = sciChartSurface.addSubChart({
    position: new Rect(0, 0, 0.5, 0.5),
    subChartContainerId: subChartContainer,
});