SvelteKit

SvelteKit is a wonderful web framework that has been gathering wide appreciation and interest among web developers recently. LightningChart JS can be used as a frontend building block in SvelteKit applications to add interactive and powerful data visualization components to the user interface.

The latest template on how to integrate LightningChart JS in a SvelteKit application is maintained at GitHub. Below you can find a minimal overview.

• Install LightningChart JS

npm i @arction/lcjs

• Create a DIV to house the chart

<!-- routes/+page.svelte -->
<div id='chart'></div>

<style>
    #chart {
        height: 300px;
    }
</style>

• Create the chart using onMount lifecycle function

<!-- routes/+page.svelte -->
<script>
    import { onMount } from 'svelte'
    import { Themes, lightningChart } from '@arction/lcjs'

    onMount(() => {
        const container = document.getElementById('chart')
        if (!container) { return }

        const chart = lightningChart().ChartXY({ container, theme: Themes.light })

        return () => {
            // This callback is called when the component is destroyed.
            chart.dispose()
        }
    })
</script>

• Pass data to LightningChart JS

This example passes data to the chart using a simple import from the server, like so:

// routes/+page.server.js
export function load() {
    const exampleData = [];
    let prevY = 0;
    for (let i = 0; i < 100000; i += 1) {
        const y = prevY + (Math.random() * 2 - 1);
        exampleData.push({ x: i, y });
        prevY = y;
    }
    return { exampleData };
}

<!-- routes/+page.svelte -->
<script>
    export let data;
    // ...
    const lineSeries = chart.addLineSeries({ dataPattern: { pattern: 'ProgressiveX' } })
        .add(data.exampleData)
</script>

For more details and a minimal example, see LCJS x SvelteKit template