Components

Chart

Line, area, bar, stacked bar and donut charts and a small trend line; every chart comes with a summary and a data table.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { Chart } from '@bigbang/ui';
Source: Chart.tsx
Storybook: Chart · Playground

Chart is in the @bigbang/ui package and uses ECharts 6 (it comes with the package). Installation and style files are the same as for Button; see the Button code tab.

import { Chart } from '@bigbang/ui';

<Chart
  kind="line"
  title="Monthly values"
  series={[
    {
      id: 'first',
      label: 'First series',
      data: [
        { x: 'January', y: 12 },
        { x: 'February', y: 18 },
      ],
    },
  ]}
/>;

Props

kind

Description: How the data is drawn. line and area show change over an ordered axis, bar compares categories, stacked-bar shows parts of a total, donut shows shares of one series (up to 5 parts).
Type: ChartKind
Default: 'line'

titleRequired

Description: Names the chart. It is the visible caption (figcaption), the table caption and the start of the accessible name.
Type: string

titleHidden

Description: Hides the caption visually and keeps it for screen readers, for a chart whose heading is already on the page.
Type: boolean
Default: false

description

Description: One or two sentences about what the chart shows. It is linked with aria-describedby.
Type: string

seriesRequired

Description: The data. Each series has a stable id, a label and points of { x, y }. A donut draws the first series only.
Type: ChartSeries[]

formatValue

Description: Formats values in axes, tooltips, the summary and the table. Defaults to Intl.NumberFormat in the Provider language.
Type: (value: number) => string

formatCategory

Description: Formats category labels, such as a month or a date. Defaults to the value as text.
Type: (category: string | number) => string

height

Description: Plot height: 160, 240 or 320 px.
Type: 'sm' | 'md' | 'lg'
Default: 'md'

legend

Description: Shows the legend. Defaults to true when there is more than one series, and for a donut.
Type: boolean

loading

Description: Shows a placeholder block instead of the chart and marks the figure aria-busy.
Type: boolean
Default: false

emptyLabel

Description: Text shown when there is no data. Defaults to the library string "Bu dönem için veri yok" or "No data for this period".
Type: string

hideValues

Description: Privacy mode: axis values are removed and tooltips, the summary and the table show ••••.
Type: boolean
Default: false

table

Description: The data table every chart has for people who cannot use the drawing. toggle adds a button that swaps the chart for the table, visible shows both, hidden leaves the table out (provide the data another way).
Type: 'toggle' | 'visible' | 'hidden'
Default: 'toggle'

className

Description: For layout only: margins, width and grid placement.
Type: string

Parts and data

Part	Element	Props
`Chart.Sparkline`	`<div>`	`data` (`number[]`), `label`, `tone` (`neutral`, `positive`, `negative`, `brand`), `className`. The height is the `chart-sparkline-height` token.

Series shape: { id: string; label: string; data: { x: string | number; y: number }[] }. Keep the id stable: new data with the same id updates in place and the entrance does not replay.

Data attributes

data-component="chart", data-kind: on the figure. The sparkline carries data-component="sparkline" and data-tone.
data-part: plot, table, empty.

Formatting

Without formatValue, numbers are formatted with Intl.NumberFormat in the Provider language (1,234.5 in English). Pass your own formatter for percentages or units.

<Chart
  title="Monthly values"
  series={series}
  formatValue={(value) => new Intl.NumberFormat('en-GB', { style: 'percent' }).format(value / 100)}
  formatCategory={(month) => String(month).slice(0, 3)}
/>

Content security policy (CSP)

Charts are drawn as SVG; ECharts writes inline style attributes on SVG elements. Pages that use charts therefore need style-src-attr 'unsafe-inline'. No unsafe-eval is needed, no network request is made, and no font or image is downloaded.

Chart imports only these ECharts modules, so a bundler can drop the rest:

echarts/core
echarts/charts: LineChart, BarChart, PieChart
echarts/components: GridComponent, TooltipComponent, LegendComponent, AriaComponent, DatasetComponent
echarts/renderers: SVGRenderer

Do not import the whole echarts package.

Server rendering

On the server the figure, caption, summary and table render; ECharts starts only in the browser after the component mounts. Colours are read at run time; when the brand or mode (data-theme, data-brand) changes, the chart redraws.