replace direct core lib usage with SciChartReact in MultiLineLabels component

[dilipt-capitalnumber]

To reuse the same chart setup logic we need to extract it to a separate file - drawExample.ts. Usually, the setup logic is contained within a drawExample function. So we need to move it from index.tsx to the drawExample.ts and export it from there. Then to allow the function to be passed to the SciChartReact we need to ensure it has the proper signature for input param and passes it to SciChartSurface.create method.

Also, it should return an object that contains at least the sciChartSurface property

Currently, most of the examples should already return the reference to a surface. Also, they can return other properties that might be used by the consuming code, so should be handled accordingly if so.

After extracting the logic we can replace the root element for a chart with SciChartReact. SciChartReact will call the drawExample function passed via initChart property and will manage the deletion of the surface returned by the drawExample as well. So these lines could be removed from the effect hook (and potentially the whole usage effect hook could be removed as well):

[codesandbox[bot]]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview