BubbleChart

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

const data = [
  { x: 2, y: 18, size: 40 },
  { x: 5, y: 24, size: 120 },
  { x: 8, y: 12, size: 65 },
  { x: 11, y: 30, size: 210 },
  { x: 14, y: 21, size: 90 },
];

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

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

const data = [
  { x: 2, y: 18, size: 40 },
  { x: 5, y: 24, size: 120 },
  { x: 8, y: 12, size: 65 },
  { x: 11, y: 30, size: 210 },
  { x: 14, y: 21, size: 90 },
];
</script>

<template>
  <div style="width: 480px">
    <SpBubbleChart
      :data="data"
      x-key="x"
      y-key="y"
      size-key="size"
      title="Markets"
    />
  </div>
</template>

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

import { Component } from '@angular/core';
import { SpBubbleChart } from '@silverpoint/angular/bubble-chart';

@Component({
  selector: 'app-root',
  imports: [SpBubbleChart],
  template: `
    <div style="width: 480px">
      <sp-bubble-chart
        [data]="data"
        xKey="x"
        yKey="y"
        sizeKey="size"
        title="Markets"
      />
    </div>
  `,
})
export class App {
  protected readonly data = [
    { x: 2, y: 18, size: 40 },
    { x: 5, y: 24, size: 120 },
    { x: 8, y: 12, size: 65 },
    { x: 11, y: 30, size: 210 },
    { x: 14, y: 21, size: 90 },
  ];
}

import reflex as rx
from reflex_silverpoint_react import bubble_chart

DATA = [
    {"x": 2, "y": 18, "size": 40},
    {"x": 5, "y": 24, "size": 120},
    {"x": 8, "y": 12, "size": 65},
    {"x": 11, "y": 30, "size": 210},
    {"x": 14, "y": 21, "size": 90},
]


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


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