ScatterChart

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

const data = [
  { x: 152, y: 51, size: 2 },
  { x: 158, y: 56, size: 4 },
  { x: 161, y: 54, size: 3 },
  { x: 165, y: 62, size: 6 },
  { x: 168, y: 60, size: 5 },
  { x: 171, y: 68, size: 8 },
  { x: 175, y: 71, size: 7 },
  { x: 178, y: 69, size: 9 },
  { x: 182, y: 77, size: 10 },
];

export default function App() {
  return (
    <div style={{ width: 480 }}>
      <ScatterChart
        data={data}
        xKey="x"
        yKey="y"
        sizeKey="size"
        title="Height and weight"
      />
    </div>
  );
}

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

const data = [
  { x: 152, y: 51, size: 2 },
  { x: 158, y: 56, size: 4 },
  { x: 161, y: 54, size: 3 },
  { x: 165, y: 62, size: 6 },
  { x: 168, y: 60, size: 5 },
  { x: 171, y: 68, size: 8 },
  { x: 175, y: 71, size: 7 },
  { x: 178, y: 69, size: 9 },
  { x: 182, y: 77, size: 10 },
];
</script>

<template>
  <div style="width: 480px">
    <SpScatterChart
      :data="data"
      x-key="x"
      y-key="y"
      size-key="size"
      title="Height and weight"
    />
  </div>
</template>

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

import { Component } from '@angular/core';
import { SpScatterChart } from '@silverpoint/angular/scatter-chart';

@Component({
  selector: 'app-root',
  imports: [SpScatterChart],
  template: `
    <div style="width: 480px">
      <sp-scatter-chart
        [data]="data"
        xKey="x"
        yKey="y"
        sizeKey="size"
        title="Height and weight"
      />
    </div>
  `,
})
export class App {
  protected readonly data = [
    { x: 152, y: 51, size: 2 },
    { x: 158, y: 56, size: 4 },
    { x: 161, y: 54, size: 3 },
    { x: 165, y: 62, size: 6 },
    { x: 168, y: 60, size: 5 },
    { x: 171, y: 68, size: 8 },
    { x: 175, y: 71, size: 7 },
    { x: 178, y: 69, size: 9 },
    { x: 182, y: 77, size: 10 },
  ];
}

import reflex as rx
from reflex_silverpoint_react import scatter_chart

DATA = [
    {"x": 152, "y": 51, "size": 2},
    {"x": 158, "y": 56, "size": 4},
    {"x": 161, "y": 54, "size": 3},
    {"x": 165, "y": 62, "size": 6},
    {"x": 168, "y": 60, "size": 5},
    {"x": 171, "y": 68, "size": 8},
    {"x": 175, "y": 71, "size": 7},
    {"x": 178, "y": 69, "size": 9},
    {"x": 182, "y": 77, "size": 10},
]


def index() -> rx.Component:
    return rx.box(
        scatter_chart(
            data=DATA,
            x_key="x",
            y_key="y",
            size_key="size",
            title="Height and weight",
        ),
        width="480px",
    )


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