BulletChart

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

const data = [
  { title: 'Revenue', actual: 72, target: 80 },
  { title: 'Profit', actual: 58, target: 65 },
  { title: 'New users', actual: 86, target: 75 },
  { title: 'Retention', actual: 41, target: 60 },
];

export default function App() {
  return (
    <div style={{ width: 480 }}>
      <BulletChart
        data={data}
        titleKey="title"
        actualKey="actual"
        targetKey="target"
        title="Quarter targets"
      />
    </div>
  );
}

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

const data = [
  { title: 'Revenue', actual: 72, target: 80 },
  { title: 'Profit', actual: 58, target: 65 },
  { title: 'New users', actual: 86, target: 75 },
  { title: 'Retention', actual: 41, target: 60 },
];
</script>

<template>
  <div style="width: 480px">
    <SpBulletChart
      :data="data"
      title-key="title"
      actual-key="actual"
      target-key="target"
      title="Quarter targets"
    />
  </div>
</template>

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

import { Component } from '@angular/core';
import { SpBulletChart } from '@silverpoint/angular/bullet-chart';

@Component({
  selector: 'app-root',
  imports: [SpBulletChart],
  template: `
    <div style="width: 480px">
      <sp-bullet-chart
        [data]="data"
        titleKey="title"
        actualKey="actual"
        targetKey="target"
        title="Quarter targets"
      />
    </div>
  `,
})
export class App {
  protected readonly data = [
    { title: 'Revenue', actual: 72, target: 80 },
    { title: 'Profit', actual: 58, target: 65 },
    { title: 'New users', actual: 86, target: 75 },
    { title: 'Retention', actual: 41, target: 60 },
  ];
}

import reflex as rx
from reflex_silverpoint_react import bullet_chart

DATA = [
    {"title": "Revenue", "actual": 72, "target": 80},
    {"title": "Profit", "actual": 58, "target": 65},
    {"title": "New users", "actual": 86, "target": 75},
    {"title": "Retention", "actual": 41, "target": 60},
]


def index() -> rx.Component:
    return rx.box(
        bullet_chart(
            data=DATA,
            title_key="title",
            actual_key="actual",
            target_key="target",
            title="Quarter targets",
        ),
        width="480px",
    )


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