ComposedChart

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

const data = [
  { x: 'Jan', revenue: 42, margin: 18 },
  { x: 'Feb', revenue: 48, margin: 21 },
  { x: 'Mar', revenue: 39, margin: 17 },
  { x: 'Apr', revenue: 55, margin: 26 },
  { x: 'May', revenue: 61, margin: 30 },
  { x: 'Jun', revenue: 58, margin: 27 },
];

export default function App() {
  return (
    <div style={{ width: 480 }}>
      <ComposedChart
        data={data}
        xKey="x"
        barKey="revenue"
        lineKey="margin"
        title="Revenue and margin"
      />
    </div>
  );
}

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

const data = [
  { x: 'Jan', revenue: 42, margin: 18 },
  { x: 'Feb', revenue: 48, margin: 21 },
  { x: 'Mar', revenue: 39, margin: 17 },
  { x: 'Apr', revenue: 55, margin: 26 },
  { x: 'May', revenue: 61, margin: 30 },
  { x: 'Jun', revenue: 58, margin: 27 },
];
</script>

<template>
  <div style="width: 480px">
    <SpComposedChart
      :data="data"
      x-key="x"
      bar-key="revenue"
      line-key="margin"
      title="Revenue and margin"
    />
  </div>
</template>

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

import { Component } from '@angular/core';
import { SpComposedChart } from '@silverpoint/angular/composed-chart';

@Component({
  selector: 'app-root',
  imports: [SpComposedChart],
  template: `
    <div style="width: 480px">
      <sp-composed-chart
        [data]="data"
        xKey="x"
        barKey="revenue"
        lineKey="margin"
        title="Revenue and margin"
      />
    </div>
  `,
})
export class App {
  protected readonly data = [
    { x: 'Jan', revenue: 42, margin: 18 },
    { x: 'Feb', revenue: 48, margin: 21 },
    { x: 'Mar', revenue: 39, margin: 17 },
    { x: 'Apr', revenue: 55, margin: 26 },
    { x: 'May', revenue: 61, margin: 30 },
    { x: 'Jun', revenue: 58, margin: 27 },
  ];
}

import reflex as rx
from reflex_silverpoint_react import composed_chart

DATA = [
    {"x": "Jan", "revenue": 42, "margin": 18},
    {"x": "Feb", "revenue": 48, "margin": 21},
    {"x": "Mar", "revenue": 39, "margin": 17},
    {"x": "Apr", "revenue": 55, "margin": 26},
    {"x": "May", "revenue": 61, "margin": 30},
    {"x": "Jun", "revenue": 58, "margin": 27},
]


def index() -> rx.Component:
    return rx.box(
        composed_chart(
            data=DATA,
            x_key="x",
            bar_key="revenue",
            line_key="margin",
            title="Revenue and margin",
        ),
        width="480px",
    )


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