e8-chart
Updated on Sep 18, 2025 38 minutes to readA versatile charting component offering various chart types, customization options, and data visualization features.
Overview
e8-chart renders interactive data visualizations directly. It supports a wide range of chart types (bar, line, pie, radar, etc.) and allows granular control over axes, legends and labels.
const content = `
<e8-chart
type="horizontalBar"
:series="series"
:points="points"
width="500"
height="400"
title="Chart"
></e8-chart>
`;
const series = ['Series 1', 'Series 2', 'Series 3'];
const points = [
['Point 1', 500, 727, 648],
['Point 2', 721, 500, 528],
['Point 3', 595, 645, 838]
];
E8App.$response.sendAsHtml(E8App.$html.compile(content, { series, points }));
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| alpha-channel | Opacity of series fills, from 0 (transparent) to 1 (opaque). | number | 0.5 |
| annotations | Label annotations positioned using chart coordinates, with optional pixel offsets, styling, and callouts. Supported by Cartesian charts. | Array<E8ChartAnnotationType> | [] |
| height | Chart height in pixels. | number | 200 |
| legend | Shows the chart legend. | boolean | true |
| palette | CSS colors used for series. The colors repeat when there are more series than palette entries. | string[] | default chart palette |
| point-size | Point radius in pixels for line and scatter series. | number | 3 |
| point-type | Default point marker shape. | E8ChartPointTypes | 'circleFilled' |
| points | Data rows. row[0] is the X-axis label/value; the remaining values correspond to series. | Array<E8ChartPoint> | [] |
| series | Series labels or configuration objects. A series can override type, fill, spline, color, style, showLine, spanGaps, pointSize, hoverPointSize, and pointType. | Array<E8ChartSeries> | [] |
| spline | Enables spline interpolation. Can be overridden for each line series and takes precedence over the deprecated x-axis-spline. | boolean | false |
| title | Main chart title. | string | — |
| type | Base chart type. See Chart types. Invalid or missing values fall back to 'bar'. | E8ChartTypes | 'bar' |
| width | Chart width in pixels. | number | 300 |
| x-axis | Shows the X-axis. Applies to Cartesian charts. | boolean | true |
| x-axis-logarithmic | Enables a logarithmic X-axis scale. | boolean | false |
| x-axis-major-grid | Shows major X-axis grid lines. | boolean | true |
| x-axis-minor-grid | Shows minor X-axis grid lines. | boolean | false |
| x-axis-numeric | Treats X-axis values as numbers instead of categories. | boolean | false |
| x-axis-spline | Deprecated alias for spline. Used only when spline is not specified. | boolean | false |
| x-axis-starts-at-zero | Extends the numeric X-axis range to include zero. Ignored for logarithmic axes. | boolean | false |
| x-axis-title | X-axis title. | string | — |
| y-axis | Shows the Y-axis. Applies to Cartesian charts. | boolean | true |
| y-axis-logarithmic | Enables a logarithmic Y-axis scale. | boolean | false |
| y-axis-major-grid | Shows major Y-axis grid lines. | boolean | true |
| y-axis-minor-grid | Shows minor Y-axis grid lines. | boolean | false |
| y-axis-starts-at-zero | Extends the Y-axis range to include zero. Ignored for logarithmic axes. | boolean | false |
| y-axis-title | Y-axis title. | string | — |