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:
Where the CSS class definitions are as follows:
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.
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:
Then we can simply pass it instead of the ID: