Charts
Usage
The Chart component is not part of the main UI Framework — include the additional script to use it:
<script src="https://client-version.cf.emarsys.net/ui-charts/latest/app.js"></script>
See the Data Visualization guidelines for advice on choosing the right chart type.
Basic Chart
Preview
Config
Height
Height of the chart container in pixels.
Locale
Date localisation of the chart.
Domain Type
Type of X values.
Hide X Axis
Hides the X axis.
Hide Y Axis
Hides the Y axis.
Strategy Min
Makes bottom of Y axis relative to data.
Strategy Max
Makes top of Y axis relative to data.
Separate Y Axes
Multiple charts use different Y axes.
Disable Animation
Disables the animation of data.
Series Component (data shows only in tooltip)
Preview
Height
[height]
Preview
Locale
[locale]
Preview
Strategy Min/Max
[strategy-min="reasonable"] [strategy-max="reasonable"]
Preview
Hidden Axes
[axis-x-hidden]
Preview
[axis-y-hidden]
Preview
Format X
[format-x="date"]
Preview
Separate Y Axes
[separate-y-axes]
Preview
Currency
[currency="USD"]
Preview
axisYFormatter and formatY
Preview
Date Format
[axis-x-date-format] [tooltip-x-date-format]
Preview
Loading State
Preview
Line Charts
Line
Preview
Line Without Interpolation
[interpolate="false"]
Preview
Line with Markers
[marker="true"]
Preview
Area Charts
Area
Preview
Stacked Area
Preview
Column Charts
Column
Preview
Column with Color
Preview
Column Highlight Last
[highlight-last]
Preview
Column with Padding
[padding="0.5"]
Preview
Stacked Column
Preview
Grouped Column
Preview
Other
Time Data with Irregular Intervals
Preview
Custom Tooltips
Preview
Missing Data
Preview