e8-chart
Updated on Sep 18, 2025 9 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.5 |
| annotations | Label annotations positioned using chart coordinates, with optional pixel offsets, styling, and callouts. Supported by Cartesian charts. | Array<E8ChartAnnotationType> | [] |
| 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' |
| hover-point-size | Radius/size of data points while hovering line and scatter charts. | number | 3 |
| 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. | string[] | — |
| point-size | Radius/size of data points for line and scatter charts. 0 hides the points. | number | 3 |
| point-type | Shape of data points. Can be overridden for each series. | 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> | [] |
| responsive | Allows the chart to redraw when the container size changes. | boolean | true |
| series | Array of series labels or configuration objects. | Array<E8ChartSeries> | [] |
| spline | Renders line series with a smooth spline curve instead of straight lines, including line series in mixed charts. Can be overridden for each line series. | boolean | true |
| title | Text displayed as the main chart title. | string | — |
| type | Chart type. | E8ChartTypes | 'bar' |
| x-axis-logarithmic | Enables logarithmic scale for the X-axis. Useful for datasets spanning several orders of magnitude | 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-starts-at-zero | Forces the X-axis scale to begin at zero. Requires x-axis-numeric to be set to true. | 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-logarithmic | Enables logarithmic scale for the Y-axis. Helps visualize datasets with exponential growth | boolean | false |
| 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 |
Examples
Series spline: chart default and override
<e8-chart
type="line"
title="Series spline: chart default and override"
:series="[
{ label: 'Spline from chart', fill: false },
{ label: 'Straight override', fill: false, spline: false }
]"
:points="[
['A', 2, 6],
['B', 7, 3],
['C', 3, 8],
['D', 8, 4]
]"
:spline="true"
></e8-chart>
🔽 Show more
Series style: solid, dotted, dashed
<e8-chart
type="line"
title="Series style: solid, dotted, dashed"
:series="[
{ label: 'Solid', fill: false, style: 'solid' },
{ label: 'Dotted', fill: false, style: 'dotted' },
{ label: 'Dashed', fill: false, style: 'dashed' }
]"
:points="[
['A', 2, 4, 6],
['B', 5, 7, 3],
['C', 3, 2, 8],
['D', 7, 6, 5]
]"
></e8-chart>
🔽 Show more
Series showLine: true and false
<e8-chart
type="line"
title="Series showLine: true and false"
:series="[
{ label: 'Line and points', fill: false, showLine: true, pointSize: 6 },
{ label: 'Points only', fill: false, showLine: false, pointSize: 6 }
]"
:points="[
['A', 2, 6],
['B', 5, 3],
['C', 3, 7],
['D', 7, 4]
]"
></e8-chart>
🔽 Show more
Series spanGaps: false and true
<e8-chart
type="line"
title="Series spanGaps: false and true"
:series="[
{ label: 'Gap remains', fill: false, spanGaps: false, pointSize: 6 },
{ label: 'Gap connected', fill: false, spanGaps: true, pointSize: 6 }
]"
:points="[
['A', 2, 6],
['B', null, null],
['C', 4, 8],
['D', 3, 7]
]"
></e8-chart>
🔽 Show more
Point and hover sizes (hover the points)
<e8-chart
type="line"
title="Point and hover sizes (hover the points)"
:point-size="3"
:hover-point-size="12"
:series="[
{ label: 'Global: 3 / hover 12', fill: false },
{ label: 'Series: 8 / hover 16', fill: false, pointSize: 8, hoverPointSize: 16 },
{ label: 'Hidden / hover 0', fill: false, pointSize: 0, hoverPointSize: 0 }
]"
:points="[
['A', 2, 5, 8],
['B', 4, 7, 6],
['C', 3, 4, 9],
['D', 6, 8, 5]
]"
></e8-chart>
🔽 Show more
Series pointType: all marker shapes
<e8-chart
type="line"
title="Series pointType: all marker shapes"
:point-size="7"
:series="[
{ label: 'square', fill: false, pointType: 'square' },
{ label: 'triangleUp', fill: false, pointType: 'triangleUp' },
{ label: 'triangleDown', fill: false, pointType: 'triangleDown' },
{ label: 'diamond', fill: false, pointType: 'diamond' },
{ label: 'circle', fill: false, pointType: 'circle' },
{ label: 'circleFilled', fill: false, pointType: 'circleFilled' },
{ label: 'cross', fill: false, pointType: 'cross' },
{ label: 'star', fill: false, pointType: 'star' },
{ label: 'x', fill: false, pointType: 'x' }
]"
:points="[
['A', 1, 2, 3, 4, 5, 6, 7, 8, 9],
['B', 1, 2, 3, 4, 5, 6, 7, 8, 9],
['C', 1, 2, 3, 4, 5, 6, 7, 8, 9]
]"
></e8-chart>
🔽 Show more
Mixed: line with bar and scatter
<e8-chart
type="line"
title="Mixed: line with bar and scatter"
:series="[
{ label: 'Trend', type: 'line', color: '#537bc4', fill: false, pointSize: 5 },
{ label: 'Revenue', type: 'bar', color: '#acc236' },
{ label: 'Forecast', type: 'scatter', color: '#f53794', pointSize: 7 }
]"
:points="[
['Jan', 10, 12, 11],
['Feb', 14, 19, 16],
['Mar', 17, 15, 18],
['Apr', 21, 24, 22]
]"
></e8-chart>
🔽 Show more
Three filled lines
<e8-chart
type="line"
title="Three filled lines"
:series="[
{ label: 'Upper line', fill: true },
{ label: 'Middle line', fill: true },
{ label: 'Lower line', fill: true }
]"
:points="[
['Jan', 12, 8, 4],
['Feb', 15, 10, 6],
['Mar', 13, 9, 5],
['Apr', 18, 12, 7],
['May', 16, 11, 6],
['Jun', 20, 14, 9]
]"
:alpha-channel="0.25"
></e8-chart>
🔽 Show more
Annotations: label
<e8-chart
type="scatter"
title="Response time vs. satisfaction"
:series="[
{
label: 'Survey',
pointSize: 6,
showLine: false
}
]"
:points="[
[1, 96],
[2, 91],
[3, 88],
[5, 79],
[8, 68],
[13, 53]
]"
:x-axis-numeric="true"
x-axis-title="Response time, min"
y-axis-title="Satisfaction, %"
:annotations="[
{
type: 'label',
content: 'Best experience',
xValue: 1,
yValue: 96,
color: '#ffffff',
backgroundColor: '#2e7d32',
borderRadius: 5,
xAdjust: 24,
yAdjust: 14
},
{
type: 'label',
content: 'Target boundary',
xValue: 5,
yValue: 79,
color: '#4e342e',
backgroundColor: '#ffe082',
borderColor: '#ffb300',
borderRadius: 4,
rotation: -10,
yAdjust: -18
},
{
type: 'label',
content: 'No background',
xValue: 13,
yValue: 53,
color: '#4e342e',
},
{
type: 'label',
content: ['Escalation', 'required'],
xValue: 8,
yValue: 68,
color: '#ffffff',
backgroundColor: '#c62828',
borderRadius: 5,
fontStyle: 'bold',
xAdjust: -30,
yAdjust: -18
}
]"
></e8-chart>
🔽 Show more
Annotations: label with callout
<e8-chart
type="line"
title="Numeric line callouts"
:series="['Temperature']"
:points="[
[0, 18],
[2, 21],
[4, 27],
[6, 31],
[8, 26],
[10, 22]
]"
:x-axis-numeric="true"
x-axis-title="Hour"
y-axis-title="Temperature, °C"
:annotations="[
{
type: 'label',
content: 'Maximum: 31°C',
xValue: 6,
yValue: 31,
color: '#ffffff',
backgroundColor: '#e53935',
borderRadius: 5,
fontStyle: 'bold',
xAdjust: 90,
yAdjust: 40,
callout: {
borderColor: '#e53935',
borderWidth: 2,
borderStyle: 'dashed'
}
},
{
type: 'label',
content: 'Cooling starts',
xValue: 8,
yValue: 26,
color: '#0d47a1',
xAdjust: -80,
yAdjust: -35,
callout: {
borderColor: '#1e88e5',
borderWidth: 1,
borderStyle: 'solid'
}
}
]"
></e8-chart>
🔽 Show more