Chart

Line, area, bar or scatter. Text stays its real size at every width, and a table with the same numbers sits behind it.

openvibe-shared/kitJSON

Build it

kit.chart({ type: 'area', title: 'Viewers, last 7 days', y: { fmt: 'compact' }, x: { time: true }, series: [{ name: 'Viewers', points: [[1793023500000, 820], [1793109900000, 1100], [1793196300000, 960], [1793282700000, 1480], [1793369100000, 1320], [1793455500000, 1710], [1793541900000, 1204]] }] })

Props

x: object?
y: object?
id: any?
note: string?
type: string?
label: string?
title: string?
height: number?
points: list?
series: list?

Anatomy

chartLine, area, bar or scatter. Text stays its real size at every width, and a table with the same numbers sits behind it.

Behaviour and access

Keyboard: Standard focus order
Outside tap: Leaves it open
Scroll: The page still scrolls
Reduced motion: Durations become zero; the state change stays.
Name: Chart
Target: At least 44 × 44 px on touch
Focus: Visible keyboard focus; follow reading order

States

default
focused

Tokens

color.accent.base
color.text.primary

Android · Jetpack Compose

Material 3 Chart

Use Chart in Jetpack Compose with the shared tokens.

iOS · SwiftUI

Use Chart in SwiftUI with the shared tokens.

Markup

Default

<figure class="ovk-chart ovk-chart--area" style="--ovk-chart-h:220px;--ovk-chart-g:42px"><figcaption><strong>Viewers, last 7 days</strong></figcaption><ul class="ovk-chart-legend"><li class="ovk-chart-s1"><i aria-hidden="true"></i>Viewers <b>1.2k</b></li></ul><div class="ovk-chart-plot" tabindex="0" role="img" aria-label="Viewers, last 7 days" data-ovk-chart="{&quot;x&quot;:[[0,&quot;Oct 26&quot;],[16.67,&quot;Oct 27&quot;],[33.33,&quot;Oct 28&quot;],[50,&quot;Oct 29&quot;],[66.67,&quot;Oct 30&quot;],[83.33,&quot;Oct 31&quot;],[100,&quot;Nov 1&quot;]],&quot;s&quot;:[{&quot;n&quot;:&quot;Viewers&quot;,&quot;c&quot;:1,&quot;v&quot;:[[41,&quot;820&quot;],[55,&quot;1.1k&quot;],[48,&quot;960&quot;],[74,&quot;1.5k&quot;],[66,&quot;1.3k&quot;],[85.5,&quot;1.7k&quot;],[60.2,&quot;1.2k&quot;]]}]}"><span class="ovk-chart-grid" style="bottom:0%" aria-hidden="true"></span><span class="ovk-chart-yt" style="bottom:0%" aria-hidden="true">0</span><span class="ovk-chart-grid" style="bottom:25%" aria-hidden="true"></span><span class="ovk-chart-yt" style="bottom:25%" aria-hidden="true">500</span><span class="ovk-chart-grid" style="bottom:50%" aria-hidden="true"></span><span class="ovk-chart-yt" style="bottom:50%" aria-hidden="true">1k</span><span class="ovk-chart-grid" style="bottom:75%" aria-hidden="true"></span><span class="ovk-chart-yt" style="bottom:75%" aria-hidden="true">1.5k</span><span class="ovk-chart-grid" style="bottom:100%" aria-hidden="true"></span><span class="ovk-chart-yt" style="bottom:100%" aria-hidden="true">2k</span><span class="ovk-chart-xt" style="left:23.55%" aria-hidden="true">Oct 28</span><span class="ovk-chart-xt" style="left:56.89%" aria-hidden="true">Oct 30</span><span class="ovk-chart-xt" style="left:90.22%" aria-hidden="true">Nov 1</span><svg class="ovk-chart-svg" viewBox="0 0 1000 1000" preserveAspectRatio="none" aria-hidden="true" focusable="false"><g class="ovk-chart-s1"><path class="ovk-chart-area" d="M0.0,590.0L166.7,450.0L333.3,520.0L500.0,260.0L666.7,340.0L833.3,145.0L1000.0,398.0L1000.0,1000.0L0.0,1000.0Z"/><path class="ovk-chart-line" d="M0.0,590.0L166.7,450.0L333.3,520.0L500.0,260.0L666.7,340.0L833.3,145.0L1000.0,398.0"/></g></svg><span class="ovk-chart-rule" hidden></span><span class="ovk-chart-tip" hidden></span></div><div class="ovk-sr"><table><caption>Viewers, last 7 days</caption><thead><tr><th scope="col"></th><th scope="col">Viewers</th></tr></thead><tbody><tr><th scope="row">Oct 26</th><td>820</td></tr><tr><th scope="row">Oct 27</th><td>1.1k</td></tr><tr><th scope="row">Oct 28</th><td>960</td></tr><tr><th scope="row">Oct 29</th><td>1.5k</td></tr><tr><th scope="row">Oct 30</th><td>1.3k</td></tr><tr><th scope="row">Oct 31</th><td>1.7k</td></tr><tr><th scope="row">Nov 1</th><td>1.2k</td></tr></tbody></table></div></figure>