SF Charts

SplitFlow Charts are web modules to visualize your data. They are easily styled and configured with the SF no-code design tool and can be integrated in any web app with just a few lines of code.

• ❤️ No-code for UI designers and developers.
• ✨ JS Framework agnostic with SSR support.
• ❄️ Embedded into your app.
• ⚡ Real time styling and configuration.

Start building

The Splitflow Design App allows to style and configure web modules with no coding skills. Start building your own pie chart, line chart or bar chart.

Integrate into your app

SF Charts are built with Svelte and can be embedded into any JS project. Below is a minimal React integration.

npm i @splitflow/chart @splitflow/react

import { useState } from 'react'
import { createDatasourceModule, createPieChartModule, pieChartSampleDatasource, pieChartSampleDefinition } from '@splitflow/chart'
import { PieChart } from '@splitflow/react'

export function MyComponent() {
    const [chart] = useState(() => {
        const chart = createPieChartModule({
            accountId: '<your-account-id>',
            moduleId: '<your-module-id>'
        })
        chart.initialize()
        chart.updateDefinition(pieChartSampleDefinition)
        return chart
    })

    const [datasource] = useState(() => {
        const datasource = createDatasourceModule({ datasourceName: 'PieChartSample' })
        datasource.updateDatasource(pieChartSampleDatasource)
        return datasource
    })

    return <PieChart module={chart} />
}

Check out the react example for an integration with NextJs with SSR support, or the example page for an integration in a SvelteKit project.