e8-chart
Updated on Sep 18, 2025 66 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, labels, colors, and responsiveness.
Insert this code into Main or Initialization script of the form to register a global method
E8App.$set(
E8App.vars,
'chartSeries',
[
{ label: 'Series 1', fill: true },
'Series 2',
'Series 3',
'Series 4',
'Series 5',
'Series 6',
'Series 7',
'Series 8',
'Series 9',
]
);
E8App.$set(
E8App.vars,
'chartPalette',
[
'#082f23',
'#0d4f3b',
'#126e53',
'#188e6b',
'#1b9e77',
'#48b192',
'#76c4ad',
'#a3d8c8',
'#d1ebe3'
]
);
E8App.$set(
E8App.vars,
'chartPoints',
[
['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],
]
);
🔽 Show more
Copy this snippet into the Content section
<e8-chart
type="bar"
title="Chart"
:series="vars.chartSeries"
:points="vars.chartPoints"
:palette="vars.chartPalette"
:x-axis-starts-at-zero="true"
:y-axis-starts-at-zero="true"
></e8-chart>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| alpha-channel | Opacity level (0 to 1) applied to the chart's background colors. | number | 0.4 |
| grid-border | Toggles the visibility of the axes border/line. | boolean | true |
| grid | Toggles the visibility of grid lines on both X and Y axes. | boolean | true |
| height | CSS height value for the chart container. | string | '15rem' |
| label-align | Data label alignment. | E8ChartLabelAlignments | 'center' |
| label-anchor | Data label anchor point. | E8ChartLabelAnchors | 'center' |
| label-background-color | Background color for the data labels. | string | — |
| label-border-color | Border color for the data labels. | string | — |
| label-border-radius | Border radius (in pixels) for the data labels. | number | — |
| label-border-width | Border width (in pixels) for the data labels. | number | — |
| label-font-size | Font size (in pixels) for the data labels. | number | — |
| label-font-style | Font style for the data labels. | E8ChartFontStyles | 'normal' |
| label-font-weight | Font weight for the data labels. | E8ChartFontWeights | 'normal' |
| label-formatter | Function or expression to format the displayed value of data labels. | — | — |
| label-opacity | Opacity (0 to 1) for the data labels. | number | — |
| label-offset | Distance (in pixels) of the data labels from the element center. | number | — |
| label-padding | Padding (in pixels) around the data labels. | number | — |
| label-text-align | Text alignment within the data labels block. | E8ChartLabelTextAlignments | 'left' |
| label-text-color | Text color for the data labels. | string | — |
| labels | Toggles the visibility of data labels on chart elements. | boolean | false |
| legend-position | Position of the legend. | E8ChartLegendPositions | 'top' |
| legend | Toggles the visibility of the chart legend. | boolean | true |
| palette | Array of color strings used for generating dataset colors. | array | — |
| point-size | Radius/size of data points for line and scatter charts. | number | 3 |
| point-type | Shape of data points. | E8ChartPointTypes | 'circle' |
| points | Array of data rows, where row[0] is the X-axis label/value, and subsequent elements are Y-values for each series. | array | [] |
| responsive | Allows the chart to redraw when the container size changes. | boolean | true |
| series | Array of series labels (datasets). For single-series charts (pie/doughnut), this is often omitted. | array | [] |
| spline | Renders line charts with a smooth spline curve instead of straight lines. | boolean | true |
| title | Text displayed as the main chart title. | string | — |
| type | Chart type. | E8ChartTypes | 'vertical-bar' |
| x-axis-numeric | Treats the X-axis values as numeric (linear scale) instead of categories (for line/scatter charts). | boolean | false |
| x-axis-starts-at-zero | Forces the X-axis scale to begin at zero. | boolean | false |
| x-axis-title | Label displayed on the X-axis. | string | — |
| x-axis | Toggles the visibility of the X-axis (and its ticks/labels). | boolean | true |
| y-axis-starts-at-zero | Forces the Y-axis scale to begin at zero. | boolean | false |
| y-axis-title | Label displayed on the Y-axis. | string | — |
| y-axis | Toggles the visibility of the Y-axis (and its ticks/labels). | boolean | true |