ErrorBarChart

import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import { ErrorBarChart } from '@silverpoint/react/error-bar-chart';

const data = [
  { arm: 'Arm A', effect: 1.61, low: 1.01, high: 2.07 },
  { arm: 'Arm B', effect: 0.2, low: -0.16, high: 1.04 },
  { arm: 'Arm C', effect: 1.25, low: 0.35, high: 2.79 },
  { arm: 'Arm D', effect: 1.64, low: 0.74, high: 2.26 },
  { arm: 'Arm E', effect: 0.45, low: -0.52, high: 2.54 },
  { arm: 'Arm F', effect: 0.34, low: -0.57, high: 2.41 },
  { arm: 'Arm G', effect: 1.03, low: 0.14, high: 1.85 },
  { arm: 'Arm H', effect: 1.04, low: -0.44, high: 2.67 },
];

export default function App() {
  return (
    <div style={{ width: 480 }}>
      <ErrorBarChart
        data={data}
        labelKey="arm"
        estimateKey="effect"
        lowKey="low"
        highKey="high"
        title="Effect by trial arm"
      />
    </div>
  );
}

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

const data = [
  { arm: 'Arm A', effect: 1.61, low: 1.01, high: 2.07 },
  { arm: 'Arm B', effect: 0.2, low: -0.16, high: 1.04 },
  { arm: 'Arm C', effect: 1.25, low: 0.35, high: 2.79 },
  { arm: 'Arm D', effect: 1.64, low: 0.74, high: 2.26 },
  { arm: 'Arm E', effect: 0.45, low: -0.52, high: 2.54 },
  { arm: 'Arm F', effect: 0.34, low: -0.57, high: 2.41 },
  { arm: 'Arm G', effect: 1.03, low: 0.14, high: 1.85 },
  { arm: 'Arm H', effect: 1.04, low: -0.44, high: 2.67 },
];
</script>

<template>
  <div style="width: 480px">
    <SpErrorBarChart
      :data="data"
      label-key="arm"
      estimate-key="effect"
      low-key="low"
      high-key="high"
      title="Effect by trial arm"
    />
  </div>
</template>

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

import { Component } from '@angular/core';
import { SpErrorBarChart } from '@silverpoint/angular/error-bar-chart';

@Component({
  selector: 'app-root',
  imports: [SpErrorBarChart],
  template: `
    <div style="width: 480px">
      <sp-error-bar-chart
        [data]="data"
        labelKey="arm"
        estimateKey="effect"
        lowKey="low"
        highKey="high"
        title="Effect by trial arm"
      />
    </div>
  `,
})
export class App {
  protected readonly data = [
    { arm: 'Arm A', effect: 1.61, low: 1.01, high: 2.07 },
    { arm: 'Arm B', effect: 0.2, low: -0.16, high: 1.04 },
    { arm: 'Arm C', effect: 1.25, low: 0.35, high: 2.79 },
    { arm: 'Arm D', effect: 1.64, low: 0.74, high: 2.26 },
    { arm: 'Arm E', effect: 0.45, low: -0.52, high: 2.54 },
    { arm: 'Arm F', effect: 0.34, low: -0.57, high: 2.41 },
    { arm: 'Arm G', effect: 1.03, low: 0.14, high: 1.85 },
    { arm: 'Arm H', effect: 1.04, low: -0.44, high: 2.67 },
  ];
}

import reflex as rx
from reflex_silverpoint_react import error_bar_chart

DATA = [
    {"arm": "Arm A", "effect": 1.61, "low": 1.01, "high": 2.07},
    {"arm": "Arm B", "effect": 0.2, "low": -0.16, "high": 1.04},
    {"arm": "Arm C", "effect": 1.25, "low": 0.35, "high": 2.79},
    {"arm": "Arm D", "effect": 1.64, "low": 0.74, "high": 2.26},
    {"arm": "Arm E", "effect": 0.45, "low": -0.52, "high": 2.54},
    {"arm": "Arm F", "effect": 0.34, "low": -0.57, "high": 2.41},
    {"arm": "Arm G", "effect": 1.03, "low": 0.14, "high": 1.85},
    {"arm": "Arm H", "effect": 1.04, "low": -0.44, "high": 2.67},
]


def index() -> rx.Component:
    return rx.box(
        error_bar_chart(
            data=DATA,
            label_key="arm",
            estimate_key="effect",
            low_key="low",
            high_key="high",
            title="Effect by trial arm",
        ),
        width="480px",
    )


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