e8-chart
Updated on Sep 18, 2025 4 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',
'Series 4',
'Series 5',
'Series 6',
'Series 7',
'Series 8',
'Series 9'
];
const points = [
['Point 1', 500, 500, 500, 727, 500, 648, 500, 940, 740],
['Point 2', 721, 500, 500, 500, 500, 528, 500, 500, 802],
['Point 3', 595, 645, 600, 500, 941, 838, 965, 551, 890],
['Point 4', 500, 500, 500, 763, 500, 722, 500, 854, 500],
['Point 5', 500, 500, 904, 540, 874, 929, 929, 620, 930]
];
E8App.$response.sendAsHtml(E8App.$html.compile(content, { series, points }));
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| height | Height value for the chart container in px. | number | 200 |
| legend | Toggles the visibility of the chart legend. | boolean | true |
| point-size | Radius/size of data points for line and scatter charts. | number | 3 |
| point-type | Shape of data points. | E8ChartPointTypes | 'circleFilled' |
| points | Array of data rows, where row[0] is the X-axis label/value, and subsequent elements are Y-values for each series. | Array<E8ChartPoint> | [] |
| series | Array of series labels (datasets). For single-series charts (pie/doughnut), this is often omitted. | Array<E8ChartSeries> | [] |
| title | Text displayed as the main chart title. | string | — |
| type | Chart type. | E8ChartTypes | 'bar' |
| width | Width value for the chart container in px. | number | 300 |
| x-axis-logarithmic | Enables logarithmic scale for the X-axis. Useful for datasets spanning several orders of magnitude | boolean | false |
| x-axis-major-grid | Shows major grid lines on the X-axis | boolean | false |
| x-axis-minor-grid | Shows minor grid lines on the X-axis | boolean | false |
| x-axis-numeric | Treats the X-axis values as numeric (linear scale) instead of categories (for line/scatter charts). | boolean | false |
| x-axis-spline | Enables spline interpolation for smoother curves in line charts | boolean | false |
| x-axis-title | Label displayed on the X-axis. | string | — |
| y-axis-logarithmic | Enables logarithmic scale for the Y-axis. Helps visualize datasets with exponential growth | boolean | false |
| y-axis-major-grid | Shows major grid lines on the Y-axis | boolean | false |
| y-axis-minor-grid | Shows minor grid lines on the Y-axis | boolean | false |
| y-axis-title | Label displayed on the Y-axis. | string | — |