LollipopChart

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

const data = [
  { branch: 'Northgate', loans: 2969 },
  { branch: 'Riverside Commons', loans: 2695 },
  { branch: 'Old Mill', loans: 6096 },
  { branch: 'Harbour View Annex', loans: 7785 },
  { branch: 'Elm Street', loans: 3499 },
  { branch: 'Quarry Hill', loans: 7698 },
  { branch: 'Saint Brigid Reading Rooms', loans: 7279 },
  { branch: 'Westfield', loans: 3294 },
  { branch: 'Lantern Square', loans: 7695 },
  { branch: 'Copper Beech', loans: 5301 },
  { branch: 'Marsh Lane', loans: 3486 },
  { branch: 'Upper Fenwick Community Library', loans: 3917 },
];

export default function App() {
  return (
    <div style={{ width: 480 }}>
      <LollipopChart
        data={data}
        xKey="branch"
        valueKey="loans"
        title="Loans by branch"
      />
    </div>
  );
}

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

const data = [
  { branch: 'Northgate', loans: 2969 },
  { branch: 'Riverside Commons', loans: 2695 },
  { branch: 'Old Mill', loans: 6096 },
  { branch: 'Harbour View Annex', loans: 7785 },
  { branch: 'Elm Street', loans: 3499 },
  { branch: 'Quarry Hill', loans: 7698 },
  { branch: 'Saint Brigid Reading Rooms', loans: 7279 },
  { branch: 'Westfield', loans: 3294 },
  { branch: 'Lantern Square', loans: 7695 },
  { branch: 'Copper Beech', loans: 5301 },
  { branch: 'Marsh Lane', loans: 3486 },
  { branch: 'Upper Fenwick Community Library', loans: 3917 },
];
</script>

<template>
  <div style="width: 480px">
    <SpLollipopChart
      :data="data"
      x-key="branch"
      value-key="loans"
      title="Loans by branch"
    />
  </div>
</template>

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

import { Component } from '@angular/core';
import { SpLollipopChart } from '@silverpoint/angular/lollipop-chart';

@Component({
  selector: 'app-root',
  imports: [SpLollipopChart],
  template: `
    <div style="width: 480px">
      <sp-lollipop-chart
        [data]="data"
        xKey="branch"
        valueKey="loans"
        title="Loans by branch"
      />
    </div>
  `,
})
export class App {
  protected readonly data = [
    { branch: 'Northgate', loans: 2969 },
    { branch: 'Riverside Commons', loans: 2695 },
    { branch: 'Old Mill', loans: 6096 },
    { branch: 'Harbour View Annex', loans: 7785 },
    { branch: 'Elm Street', loans: 3499 },
    { branch: 'Quarry Hill', loans: 7698 },
    { branch: 'Saint Brigid Reading Rooms', loans: 7279 },
    { branch: 'Westfield', loans: 3294 },
    { branch: 'Lantern Square', loans: 7695 },
    { branch: 'Copper Beech', loans: 5301 },
    { branch: 'Marsh Lane', loans: 3486 },
    { branch: 'Upper Fenwick Community Library', loans: 3917 },
  ];
}

import reflex as rx
from reflex_silverpoint_react import lollipop_chart

DATA = [
    {"branch": "Northgate", "loans": 2969},
    {"branch": "Riverside Commons", "loans": 2695},
    {"branch": "Old Mill", "loans": 6096},
    {"branch": "Harbour View Annex", "loans": 7785},
    {"branch": "Elm Street", "loans": 3499},
    {"branch": "Quarry Hill", "loans": 7698},
    {"branch": "Saint Brigid Reading Rooms", "loans": 7279},
    {"branch": "Westfield", "loans": 3294},
    {"branch": "Lantern Square", "loans": 7695},
    {"branch": "Copper Beech", "loans": 5301},
    {"branch": "Marsh Lane", "loans": 3486},
    {"branch": "Upper Fenwick Community Library", "loans": 3917},
]


def index() -> rx.Component:
    return rx.box(
        lollipop_chart(
            data=DATA,
            x_key="branch",
            value_key="loans",
            title="Loans by branch",
        ),
        width="480px",
    )


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