Back to Copilotkit

Chart

showcase/shell-docs/src/content/reference/channels/components/Chart.mdx

1.64.21004 B
Original Source

Chart describes a small numeric series.

tsx
import { Chart, Message, Section } from "@copilotkit/channels/ui";

<Message>
  <Section>Checkout latency rose 28% this week.</Section>
  <Chart
    type="line"
    title="p95 latency"
    yAxisTitle="milliseconds"
    data={[
      { label: "Mon", value: 780 },
      { label: "Fri", value: 998 },
    ]}
  />
</Message>;

Props

PropTypeDescription
type"verticalBar" | "horizontalBar" | "line" | "pie" | "donut"Chart kind. Defaults to verticalBar.
titlestringOptional chart title.
xAxisTitlestringCartesian x-axis title.
yAxisTitlestringCartesian y-axis title.
data{ label: string; value: number }[]Required data points.

Managed Teams renders Teams chart extensions in clients that support them. Managed Slack currently omits Chart entirely. Always include the important result in a Section, Fields, or Table, as the example does.