import { SciChartSurface } from 'scichart/Charting/Visuals/SciChartSurface';
import { Rect } from 'scichart/Core/Rect';
import { Thickness } from 'scichart/Core/Thickness';
import { NumericAxis } from 'scichart/Charting/Visuals/Axis/NumericAxis';
import { FastLineRenderableSeries } from 'scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries';
import { XyDataSeries } from 'scichart/Charting/Model/XyDataSeries';
import { ZoomPanModifier } from 'scichart/Charting/ChartModifiers/ZoomPanModifier';
import { MouseWheelZoomModifier } from 'scichart/Charting/ChartModifiers/MouseWheelZoomModifier';
// ...
const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootDivElementId, {
padding: Thickness.fromNumber(0),
});
for (let subChartIndex = 0; subChartIndex < subChartsNumber; ++subChartIndex) {
const { rowIndex, columnIndex } = getSubChartPositionIndexes(subChartIndex, columnsNumber);
const width = 1 / columnsNumber;
const height = 1 / rowsNumber;
const position = new Rect(columnIndex * width, rowIndex * height, width, height);
const subChartOptions: I2DSubSurfaceOptions = {
subChartPadding: Thickness.fromNumber(10),
id: `subChart-${subChartIndex}`,
position,
};
const subSurface = sciChartSurface.addSubChart(subChartOptions);
subSurface.xAxes.add(new NumericAxis(wasmContext, { isVisible: false }));
subSurface.yAxes.add(new NumericAxis(wasmContext, { isVisible: false }));
subSurface.renderableSeries.add(
new FastLineRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, { containsNaN: false, isSorted: true, ...getData(0, 1000) }),
stroke: '#44C8F1',
strokeThickness: 3,
})
);
subSurface.chartModifiers.add(new ZoomPanModifier(), new MouseWheelZoomModifier())
}
import { Rect } from 'scichart/Core/Rect';
import { EChart2DModifierType } from 'scichart/types/ChartModifierType';
import { ESeriesType } from 'scichart/types/SeriesType';
import { chartBuilder } from 'scichart/Builder/chartBuilder';
import { Thickness } from 'scichart/Core/Thickness';
import { EAxisType } from 'scichart/types/AxisType';
// ...
const subChartsNumber = 100;
let columnsNumber = 10;
let rowsNumber = 10;
const modifiers = [
{ type: EChart2DModifierType.ZoomPan },
{ type: EChart2DModifierType.MouseWheelZoom },
];
const subCharts = [];
for (let subChartIndex = 0; subChartIndex < subChartsNumber; ++subChartIndex) {
const { rowIndex, columnIndex } = getSubChartPositionIndexes(subChartIndex, columnsNumber);
const width = 1 / columnsNumber;
const height = 1 / rowsNumber;
const position = new Rect(columnIndex * width, rowIndex * height, width, height);
subCharts.push({
surface: {
id: `subChart-${subChartIndex}`,
subChartPadding: Thickness.fromNumber(10),
position,
},
xAxes: {
type: EAxisType.NumericAxis,
options: { isVisible: false },
},
yAxes: {
type: EAxisType.NumericAxis,
options: { isVisible: false },
},
series: {
type: ESeriesType.LineSeries,
xyData: { containsNaN: false, isSorted: true, ...getData(0, 1000) },
options: { stroke: '#44C8F1', strokeThickness: 3 },
},
modifiers,
});
}
const { sciChartSurface, wasmContext } = await chartBuilder.build2DChart(rootDivElementId, {
surface: { padding: Thickness.fromNumber(0) },
subCharts,
});