Chart

Renders an Apache ECharts visualization from declarative configuration elements.

Chart web component

Renders an Apache ECharts visualization from declarative configuration elements.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Multi-series line

Compare multiple effectiveness series over time.

Aug

Sep

Oct

Nov

Dec

<noora-chart hide-legend aria-label="Cache and test effectiveness" style="width: 600px; height: 300px">
  <noora-chart-axis dimension="x" type="category">
    <noora-chart-category>Aug</noora-chart-category>
    <noora-chart-category>Sep</noora-chart-category>
    <noora-chart-category>Oct</noora-chart-category>
    <noora-chart-category>Nov</noora-chart-category>
    <noora-chart-category>Dec</noora-chart-category>
  </noora-chart-axis>
  <noora-chart-axis dimension="y" type="value" min="0" max="100" label-format="{value}%"></noora-chart-axis>
  <noora-chart-series name="Binary cache effectiveness" type="line" symbol="none">
    <noora-chart-point value="32"></noora-chart-point>
    <noora-chart-point value="38"></noora-chart-point>
    <noora-chart-point value="42"></noora-chart-point>
    <noora-chart-point value="48"></noora-chart-point>
    <noora-chart-point value="64"></noora-chart-point>
  </noora-chart-series>
  <noora-chart-series name="Selective test effectiveness" type="line" symbol="none">
    <noora-chart-point value="48"></noora-chart-point>
    <noora-chart-point value="52"></noora-chart-point>
    <noora-chart-point value="45"></noora-chart-point>
    <noora-chart-point value="56"></noora-chart-point>
    <noora-chart-point value="62"></noora-chart-point>
  </noora-chart-series>
</noora-chart>

Horizontal bar comparison

Compare build optimization durations on a horizontal scale.

Selective Test

Build Cache

<noora-chart aria-label="Optimization duration comparison" style="width: 500px; height: 146px">
  <noora-chart-grid height="76" width="400"></noora-chart-grid>
  <noora-chart-axis dimension="x" type="value" label-format="{value}h" label-margin="25"></noora-chart-axis>
  <noora-chart-axis dimension="y" type="category" no-boundary-gap>
    <noora-chart-category>Selective Test</noora-chart-category>
    <noora-chart-category>Build Cache</noora-chart-category>
  </noora-chart-axis>
  <noora-chart-series type="bar" bar-gap="-100%" bar-width="24" border-radius="7">
    <noora-chart-point value="19"></noora-chart-point>
    <noora-chart-point value="22"></noora-chart-point>
  </noora-chart-series>
  <noora-chart-series type="bar" bar-width="24" border-radius="7">
    <noora-chart-point value="7.2"></noora-chart-point>
    <noora-chart-point value="9"></noora-chart-point>
  </noora-chart-series>
</noora-chart>

Test run duration

Use semantic colors to distinguish successful and failed runs.

<noora-chart hide-legend hide-tooltip aria-label="Test run duration" style="width: 700px; height: 300px">
  <noora-chart-axis dimension="x" type="category" hidden></noora-chart-axis>
  <noora-chart-axis dimension="y" type="value"></noora-chart-axis>
  <noora-chart-series type="bar" bar-width="8">
    <noora-chart-point value="28" color="var:noora-chart-primary"></noora-chart-point>
    <noora-chart-point value="23" color="var:noora-chart-primary"></noora-chart-point>
    <noora-chart-point value="37" color="var:noora-chart-tertiary"></noora-chart-point>
    <noora-chart-point value="22" color="var:noora-chart-primary"></noora-chart-point>
    <noora-chart-point value="32" color="var:noora-chart-tertiary"></noora-chart-point>
  </noora-chart-series>
</noora-chart>

Attributes

Attribute	Type or allowed values	Default	Description
`renderer`	canvas, svg	`"canvas"`	Chooses the chart renderer.
`tooltip-trigger`	axis, item	`"axis"`	Shows a tooltip for an axis or an individual item.
`hide-tooltip`	boolean	`false`	Hides the chart tooltip.
`hide-legend`	boolean	`false`	Hides the chart legend.
`aria-label`	string	`None`	Provides an accessible chart label.

Properties

Property	Type or allowed values	Default	Description
`options`	json	`{}`	Sets an Apache ECharts configuration object when programmatic configuration is needed.

Events

Event	Type	Description
`noora-chart-select`	`CustomEvent<{ item: unknown; parameters: unknown }>`	Emitted when an interactive chart item is selected. Prevent the default action to stop navigation for items with a link target.

Slots

Name	Description
`default`	Declarative grid, axis, and series configuration elements.

Styling parts

Name	Description
`container`	The chart wrapper.
`chart`	The chart drawing surface.

Behavior

Set an explicit block size on the element or its chart part.

Use declarative configuration elements for markup-authored charts.

Declarative charts use the same grid, axis, tooltip, legend, color, and typography defaults as the Phoenix LiveView chart component.

The options property remains available for charts assembled or updated by JavaScript.

Declarative configuration elements take precedence when both forms are provided.