RadarChart

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

const data = [
  { subject: 'Speed', value: 8 },
  { subject: 'Range', value: 6 },
  { subject: 'Comfort', value: 7 },
  { subject: 'Safety', value: 9 },
  { subject: 'Cost', value: 4 },
  { subject: 'Style', value: 6 },
];

export default function App() {
  return (
    <div style={{ width: 480 }}>
      <RadarChart
        data={data}
        subjectKey="subject"
        valueKey="value"
        title="Car profile"
      />
    </div>
  );
}

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

const data = [
  { subject: 'Speed', value: 8 },
  { subject: 'Range', value: 6 },
  { subject: 'Comfort', value: 7 },
  { subject: 'Safety', value: 9 },
  { subject: 'Cost', value: 4 },
  { subject: 'Style', value: 6 },
];
</script>

<template>
  <div style="width: 480px">
    <SpRadarChart
      :data="data"
      subject-key="subject"
      value-key="value"
      title="Car profile"
    />
  </div>
</template>

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

import { Component } from '@angular/core';
import { SpRadarChart } from '@silverpoint/angular/radar-chart';

@Component({
  selector: 'app-root',
  imports: [SpRadarChart],
  template: `
    <div style="width: 480px">
      <sp-radar-chart
        [data]="data"
        subjectKey="subject"
        valueKey="value"
        title="Car profile"
      />
    </div>
  `,
})
export class App {
  protected readonly data = [
    { subject: 'Speed', value: 8 },
    { subject: 'Range', value: 6 },
    { subject: 'Comfort', value: 7 },
    { subject: 'Safety', value: 9 },
    { subject: 'Cost', value: 4 },
    { subject: 'Style', value: 6 },
  ];
}

import reflex as rx
from reflex_silverpoint_react import radar_chart

DATA = [
    {"subject": "Speed", "value": 8},
    {"subject": "Range", "value": 6},
    {"subject": "Comfort", "value": 7},
    {"subject": "Safety", "value": 9},
    {"subject": "Cost", "value": 4},
    {"subject": "Style", "value": 6},
]


def index() -> rx.Component:
    return rx.box(
        radar_chart(
            data=DATA,
            subject_key="subject",
            value_key="value",
            title="Car profile",
        ),
        width="480px",
    )


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