xyAxis coordinate breaks when it comes to a customizable css!

[amarg3891]

Hi there, I'm using https://demo.scichart.com/javascript-line-chart and i want to show that chart in a minimal height frame ?I tried css to minimize the chart's height, it works but after a refresh it breaks the xyAxis coordinates !!

[klishevich]

Hi @amarg3891 please take a look at this example to customise the chart size - https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/CustomerExamples/SizeSciChartSurfaceToFitHeight

P.S. Please use our forum to ask questions https://github.com/ABTSoftware/SciChart.JS.Examples/issues/95

[amarg3891]

Yes It works as mentioned in code but actually I'm getting problem that why xAxis is not visible. ` // SCICHART

Here's the some code blocks :- const drawExample = async ( setInfoEcg: React.Dispatch<React.SetStateAction>, ) => { SciChartSurface.setRuntimeLicenseKey(Secret_key);

const { sciChartSurface, wasmContext } = await SciChartSurface.createSingle(divElementId);
const xAxis = new NumericAxis(wasmContext, { autoRange: EAutoRange.Once});
sciChartSurface.xAxes.add(xAxis);

const yAxis = new NumericAxis(wasmContext, {
    autoRange: EAutoRange.Never,
    visibleRange: new NumberRange(0, 4)
});
yAxis.labelProvider.numericFormat = ENumericFormat.Decimal;
sciChartSurface.yAxes.add(yAxis);

// Create and fill initial data series
const dataSeries1 = new XyDataSeries(wasmContext);

for (let i = 0; i < POINTS_LOOP; i++) {
    dataSeries1.append(i, NaN);

}

const effect = new GlowEffect(wasmContext);

console.log("dataSeries1",dataSeries1) sciChartSurface.renderableSeries.add( new FastLineRenderableSeries(wasmContext, { strokeThickness: STROKE_THICKNESS, stroke: COLOR_GREEN, dataSeries: dataSeries1 }) );

const runUpdateDataOnTimeout = () => {
    const {
        xArr,
        xPlusGapArr,
        ecgHeartRateArr,

    } = getValuesFromData(currentPoint);
    currentPoint += STEP;

    for (let i = 0; i < STEP; i++) {

// console.log(i,"xArr[i]",ecgHeartRateArr[i])

        dataSeries1.update(xArr[i], ecgHeartRateArr[i]);
        dataSeries1.update(xPlusGapArr[i], NaN);

    }
    // Update Info panel
    if (currentPoint % 1000 === 0) {
        const ecg = ecgHeartRateArr[STEP - 1];
        setInfoEcg(Math.floor(ecg * 20));

    }
    timerId = setTimeout(runUpdateDataOnTimeout, TIMER_TIMEOUT_MS);
};

const handleStop = () => {
    clearTimeout(timerId);
    //  timerId = undefined;
};

const handleStart = () => {
    if (timerId) {
        handleStop();
    }
    runUpdateDataOnTimeout();
};
return { sciChartSurface, wasmContext, controls: { handleStart, handleStop } };

};

// STYLES const useStyles = makeStyles(theme => ({}));

let currentPoint = 0; let scs: SciChartSurface; let autoStartTimerId: NodeJS.Timeout;

// REACT COMPONENT export default function EcgMonitorDemo() { const [infoEcg, setInfoEcg] = React.useState(0); const [controls, setControls] = React.useState({ handleStart: () => {}, handleStop: () => {} });

React.useEffect(() => {
    (async () => {
        const res = await drawExample(
            setInfoEcg
        );
        scs = res.sciChartSurface;
        setControls(res.controls);
        autoStartTimerId = setTimeout(res.controls.handleStart, 3000);
        console.log("autoStartTimerId", autoStartTimerId)
    })();
    // Delete sciChartSurface on unmount component to prevent memory leak
    return () => {
        controls.handleStop();
        clearTimeout(timerId);
        clearTimeout(autoStartTimerId);
        scs?.delete();
    };
}, []);

return (
    <div>
        <div id={divElementId} className={classes.ChartWrapper} style={{ height: 300, margin: "auto" }}/>
    </div>
);

} Actually i want to create something like that `