StreamChart

import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import { StreamChart } from '@silverpoint/react/stream-chart';

const data = [
  { x: 'Mon', organic: 22, paid: 14 },
  { x: 'Tue', organic: 28, paid: 18 },
  { x: 'Wed', organic: 35, paid: 16 },
  { x: 'Thu', organic: 31, paid: 24 },
  { x: 'Fri', organic: 38, paid: 29 },
  { x: 'Sat', organic: 26, paid: 21 },
  { x: 'Sun', organic: 19, paid: 12 },
];

export default function App() {
  return (
    <div style={{ width: 480 }}>
      <StreamChart
        data={data}
        xKey="x"
        keys={['organic', 'paid']}
        stacked={true}
        title="Traffic sources"
      />
    </div>
  );
}

<script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import { SpStreamChart } from '@silverpoint/vue/stream-chart';

const data = [
  { x: 'Mon', organic: 22, paid: 14 },
  { x: 'Tue', organic: 28, paid: 18 },
  { x: 'Wed', organic: 35, paid: 16 },
  { x: 'Thu', organic: 31, paid: 24 },
  { x: 'Fri', organic: 38, paid: 29 },
  { x: 'Sat', organic: 26, paid: 21 },
  { x: 'Sun', organic: 19, paid: 12 },
];
</script>

<template>
  <div style="width: 480px">
    <SpStreamChart
      :data="data"
      x-key="x"
      :keys="['organic', 'paid']"
      :stacked="true"
      title="Traffic sources"
    />
  </div>
</template>

// src/styles.css:
//   @import '@silverpoint/fonts/fonts.css';
//   @import '@silverpoint/grounds/styles.css';

import { Component } from '@angular/core';
import { SpStreamChart } from '@silverpoint/angular/stream-chart';

@Component({
  selector: 'app-root',
  imports: [SpStreamChart],
  template: `
    <div style="width: 480px">
      <sp-stream-chart
        [data]="data"
        xKey="x"
        [keys]="['organic', 'paid']"
        [stacked]="true"
        title="Traffic sources"
      />
    </div>
  `,
})
export class App {
  protected readonly data = [
    { x: 'Mon', organic: 22, paid: 14 },
    { x: 'Tue', organic: 28, paid: 18 },
    { x: 'Wed', organic: 35, paid: 16 },
    { x: 'Thu', organic: 31, paid: 24 },
    { x: 'Fri', organic: 38, paid: 29 },
    { x: 'Sat', organic: 26, paid: 21 },
    { x: 'Sun', organic: 19, paid: 12 },
  ];
}

import reflex as rx
from reflex_silverpoint_react import stream_chart

DATA = [
    {"x": "Mon", "organic": 22, "paid": 14},
    {"x": "Tue", "organic": 28, "paid": 18},
    {"x": "Wed", "organic": 35, "paid": 16},
    {"x": "Thu", "organic": 31, "paid": 24},
    {"x": "Fri", "organic": 38, "paid": 29},
    {"x": "Sat", "organic": 26, "paid": 21},
    {"x": "Sun", "organic": 19, "paid": 12},
]


def index() -> rx.Component:
    return rx.box(
        stream_chart(
            data=DATA,
            x_key="x",
            keys=["organic", "paid"],
            stacked=True,
            title="Traffic sources",
        ),
        width="480px",
    )


app = rx.App()
app.add_page(index)