Charts
This chart system is based on d3js. You should load an additional JavaScript file to use it:
<script src="https://redirector.eservice.emarsys.net/ui-charts/latest/app.js"></script>Default
<ec-chart domain-type="time">
<ec-series-line data="[{"x":"2017-08-13T10:00:00.000Z","y":-16},{"x":"2017-08-14T10:00:00.000Z","y":24},{"x":"2017-08-15T10:00:00.000Z","y":-131},{"x":"2017-08-16T10:00:00.000Z","y":14},{"x":"2017-08-17T10:00:00.000Z","y":54},{"x":"2017-08-18T10:00:00.000Z","y":76}]"></ec-series-line>
</ec-chart>
<ec-chart domain-type="time"><ec-series-line data="[{"x":"2017-08-13T10:00:00.000Z","y":-16},{"x":"2017-08-14T10:00:00.000Z","y":24},{"x":"2017-08-15T10:00:00.000Z","y":-131},{"x":"2017-08-16T10:00:00.000Z","y":14},{"x":"2017-08-17T10:00:00.000Z","y":54},{"x":"2017-08-18T10:00:00.000Z","y":76}]"></ec-series-line></ec-chart>Variations
with ec-series component (data shows only in tooltip)
<ec-chart domain-type="time" height="80">
<ec-series name="Data01" color="red" data="[{"x":"2017-08-13T10:00:00.000Z","y":-16},{"x":"2017-08-14T10:00:00.000Z","y":24},{"x":"2017-08-15T10:00:00.000Z","y":-131},{"x":"2017-08-16T10:00:00.000Z","y":14},{"x":"2017-08-17T10:00:00.000Z","y":54},{"x":"2017-08-18T10:00:00.000Z","y":76}]"></ec-series>
<ec-series-line name="Data02" data="[{"x":"2017-08-13T10:00:00.000Z","y":16},{"x":"2017-08-14T10:00:00.000Z","y":-24},{"x":"2017-08-15T10:00:00.000Z","y":131},{"x":"2017-08-16T10:00:00.000Z","y":-14},{"x":"2017-08-17T10:00:00.000Z","y":-54},{"x":"2017-08-18T10:00:00.000Z","y":-76}]"></ec-series-line>
</ec-chart>
<ec-chart domain-type="time" height="80"><ec-series name="Data01" color="red" data="[{"x":"2017-08-13T10:00:00.000Z","y":-16},{"x":"2017-08-14T10:00:00.000Z","y":24},{"x":"2017-08-15T10:00:00.000Z","y":-131},{"x":"2017-08-16T10:00:00.000Z","y":14},{"x":"2017-08-17T10:00:00.000Z","y":54},{"x":"2017-08-18T10:00:00.000Z","y":76}]"></ec-series><ec-series-line name="Data02" data="[{"x":"2017-08-13T10:00:00.000Z","y":16},{"x":"2017-08-14T10:00:00.000Z","y":-24},{"x":"2017-08-15T10:00:00.000Z","y":131},{"x":"2017-08-16T10:00:00.000Z","y":-14},{"x":"2017-08-17T10:00:00.000Z","y":-54},{"x":"2017-08-18T10:00:00.000Z","y":-76}]"></ec-series-line></ec-chart>height
<ec-chart domain-type="time" height="80">
<ec-series-line data="[{"x":"2017-08-13T10:00:00.000Z","y":-16},{"x":"2017-08-14T10:00:00.000Z","y":24},{"x":"2017-08-15T10:00:00.000Z","y":-131},{"x":"2017-08-16T10:00:00.000Z","y":14},{"x":"2017-08-17T10:00:00.000Z","y":54},{"x":"2017-08-18T10:00:00.000Z","y":76}]"></ec-series-line>
</ec-chart>
<ec-chart domain-type="time" height="80"><ec-series-line data="[{"x":"2017-08-13T10:00:00.000Z","y":-16},{"x":"2017-08-14T10:00:00.000Z","y":24},{"x":"2017-08-15T10:00:00.000Z","y":-131},{"x":"2017-08-16T10:00:00.000Z","y":14},{"x":"2017-08-17T10:00:00.000Z","y":54},{"x":"2017-08-18T10:00:00.000Z","y":76}]"></ec-series-line></ec-chart>locale
<ec-chart domain-type="time" locale="ru">
<ec-series-line data="[{"x":"2017-08-13T10:00:00.000Z","y":-16},{"x":"2017-08-14T10:00:00.000Z","y":24},{"x":"2017-08-15T10:00:00.000Z","y":-131},{"x":"2017-08-16T10:00:00.000Z","y":14},{"x":"2017-08-17T10:00:00.000Z","y":54},{"x":"2017-08-18T10:00:00.000Z","y":76}]"></ec-series-line>
</ec-chart>
<ec-chart domain-type="time" locale="ru"><ec-series-line data="[{"x":"2017-08-13T10:00:00.000Z","y":-16},{"x":"2017-08-14T10:00:00.000Z","y":24},{"x":"2017-08-15T10:00:00.000Z","y":-131},{"x":"2017-08-16T10:00:00.000Z","y":14},{"x":"2017-08-17T10:00:00.000Z","y":54},{"x":"2017-08-18T10:00:00.000Z","y":76}]"></ec-series-line></ec-chart>strategy-min and strategy-max
<ec-chart domain-type="time" strategy-min="reasonable" strategy-max="reasonable">
<ec-series-line data="[{"x":"2017-08-13T10:00:00.000Z","y":17016},{"x":"2017-08-14T10:00:00.000Z","y":19024},{"x":"2017-08-15T10:00:00.000Z","y":16131},{"x":"2017-08-16T10:00:00.000Z","y":19014},{"x":"2017-08-17T10:00:00.000Z","y":18054},{"x":"2017-08-18T10:00:00.000Z","y":19076}]"></ec-series-line>
</ec-chart>
<ec-chart domain-type="time" strategy-min="reasonable" strategy-max="reasonable"><ec-series-line data="[{"x":"2017-08-13T10:00:00.000Z","y":17016},{"x":"2017-08-14T10:00:00.000Z","y":19024},{"x":"2017-08-15T10:00:00.000Z","y":16131},{"x":"2017-08-16T10:00:00.000Z","y":19014},{"x":"2017-08-17T10:00:00.000Z","y":18054},{"x":"2017-08-18T10:00:00.000Z","y":19076}]"></ec-series-line></ec-chart>axis-x-hidden
<ec-chart domain-type="time" axis-x-hidden>
<ec-series-line data="[{"x":"2017-08-13T10:00:00.000Z","y":-16},{"x":"2017-08-14T10:00:00.000Z","y":24},{"x":"2017-08-15T10:00:00.000Z","y":-131},{"x":"2017-08-16T10:00:00.000Z","y":14},{"x":"2017-08-17T10:00:00.000Z","y":54},{"x":"2017-08-18T10:00:00.000Z","y":76}]"></ec-series-line>
</ec-chart>
<ec-chart domain-type="time" axis-x-hidden><ec-series-line data="[{"x":"2017-08-13T10:00:00.000Z","y":-16},{"x":"2017-08-14T10:00:00.000Z","y":24},{"x":"2017-08-15T10:00:00.000Z","y":-131},{"x":"2017-08-16T10:00:00.000Z","y":14},{"x":"2017-08-17T10:00:00.000Z","y":54},{"x":"2017-08-18T10:00:00.000Z","y":76}]"></ec-series-line></ec-chart>axis-y-hidden
<ec-chart domain-type="time" axis-y-hidden>
<ec-series-line data="[{"x":"2017-08-13T10:00:00.000Z","y":-16},{"x":"2017-08-14T10:00:00.000Z","y":24},{"x":"2017-08-15T10:00:00.000Z","y":-131},{"x":"2017-08-16T10:00:00.000Z","y":14},{"x":"2017-08-17T10:00:00.000Z","y":54},{"x":"2017-08-18T10:00:00.000Z","y":76}]"></ec-series-line>
</ec-chart>
<ec-chart domain-type="time" axis-y-hidden><ec-series-line data="[{"x":"2017-08-13T10:00:00.000Z","y":-16},{"x":"2017-08-14T10:00:00.000Z","y":24},{"x":"2017-08-15T10:00:00.000Z","y":-131},{"x":"2017-08-16T10:00:00.000Z","y":14},{"x":"2017-08-17T10:00:00.000Z","y":54},{"x":"2017-08-18T10:00:00.000Z","y":76}]"></ec-series-line></ec-chart>format-x
<ec-chart format-x="date">
<ec-series-column padding="0.5" data="[{"x":"2017-08-13T10:00:00.000Z","y":16},{"x":"2017-08-14T10:00:00.000Z","y":24},{"x":"2017-08-15T10:00:00.000Z","y":131},{"x":"2017-08-16T10:00:00.000Z","y":14},{"x":"2017-08-17T10:00:00.000Z","y":54},{"x":"2017-08-18T10:00:00.000Z","y":76}]"></ec-series-column>
</ec-chart>
<ec-chart format-x="date"><ec-series-column padding="0.5" data="[{"x":"2017-08-13T10:00:00.000Z","y":16},{"x":"2017-08-14T10:00:00.000Z","y":24},{"x":"2017-08-15T10:00:00.000Z","y":131},{"x":"2017-08-16T10:00:00.000Z","y":14},{"x":"2017-08-17T10:00:00.000Z","y":54},{"x":"2017-08-18T10:00:00.000Z","y":76}]"></ec-series-column></ec-chart>separate-y-axes
<ec-chart domain-type="discrete" separate-y-axes>
<ec-series-column padding="0.5" name="Open on mobile" color="#3DA53C" data="[{"x":"Lead","y":462},{"x":"First","y":142},{"x":"Active","y":113},{"x":"Defecting","y":43},{"x":"Inactive","y":846}]"></ec-series-column>
<ec-series-line z-index="1" name="Open on mobile" marker="true" data="[{"x":"Lead","y":-16},{"x":"First","y":24},{"x":"Active","y":-131},{"x":"Defecting","y":14},{"x":"Inactive","y":54}]"></ec-series-line>
</ec-chart>
<ec-chart domain-type="discrete" separate-y-axes><ec-series-column padding="0.5" name="Open on mobile" color="#3DA53C" data="[{"x":"Lead","y":462},{"x":"First","y":142},{"x":"Active","y":113},{"x":"Defecting","y":43},{"x":"Inactive","y":846}]"></ec-series-column><ec-series-line z-index="1" name="Open on mobile" marker="true" data="[{"x":"Lead","y":-16},{"x":"First","y":24},{"x":"Active","y":-131},{"x":"Defecting","y":14},{"x":"Inactive","y":54}]"></ec-series-line></ec-chart>currency
<ec-chart domain-type="time" currency="USD">
<ec-series-line format-y="$," data="[{"x":"2017-08-13T10:00:00.000Z","y":-16},{"x":"2017-08-14T10:00:00.000Z","y":24},{"x":"2017-08-15T10:00:00.000Z","y":-131},{"x":"2017-08-16T10:00:00.000Z","y":14},{"x":"2017-08-17T10:00:00.000Z","y":54},{"x":"2017-08-18T10:00:00.000Z","y":76}]"></ec-series-line>
</ec-chart>
<ec-chart domain-type="time" currency="USD"><ec-series-line format-y="$," data="[{"x":"2017-08-13T10:00:00.000Z","y":-16},{"x":"2017-08-14T10:00:00.000Z","y":24},{"x":"2017-08-15T10:00:00.000Z","y":-131},{"x":"2017-08-16T10:00:00.000Z","y":14},{"x":"2017-08-17T10:00:00.000Z","y":54},{"x":"2017-08-18T10:00:00.000Z","y":76}]"></ec-series-line></ec-chart>axis-y-formatter
<ec-chart domain-type="time" id="customFormatter">
<ec-series-line format-y="$.2s" data="[{"x":"2017-08-13T10:00:00.000Z","y":16},{"x":"2017-08-14T10:00:00.000Z","y":24},{"x":"2017-08-15T10:00:00.000Z","y":131},{"x":"2017-08-16T10:00:00.000Z","y":14},{"x":"2017-08-17T10:00:00.000Z","y":54},{"x":"2017-08-18T10:00:00.000Z","y":76}]"></ec-series-line>
</ec-chart>
<ec-chart domain-type="time" id="customFormatter"><ec-series-line format-y="$.2s" data="[{"x":"2017-08-13T10:00:00.000Z","y":16},{"x":"2017-08-14T10:00:00.000Z","y":24},{"x":"2017-08-15T10:00:00.000Z","y":131},{"x":"2017-08-16T10:00:00.000Z","y":14},{"x":"2017-08-17T10:00:00.000Z","y":54},{"x":"2017-08-18T10:00:00.000Z","y":76}]"></ec-series-line></ec-chart>Series types
line
<ec-chart domain-type="time">
<ec-series-line name="Data" data="[{"x":"2017-08-13T10:00:00.000Z","y":16},{"x":"2017-08-14T10:00:00.000Z","y":-24},{"x":"2017-08-15T10:00:00.000Z","y":131},{"x":"2017-08-16T10:00:00.000Z","y":-14},{"x":"2017-08-17T10:00:00.000Z","y":-54},{"x":"2017-08-18T10:00:00.000Z","y":-76}]"></ec-series-line>
</ec-chart>
<ec-chart domain-type="time"><ec-series-line name="Data" data="[{"x":"2017-08-13T10:00:00.000Z","y":16},{"x":"2017-08-14T10:00:00.000Z","y":-24},{"x":"2017-08-15T10:00:00.000Z","y":131},{"x":"2017-08-16T10:00:00.000Z","y":-14},{"x":"2017-08-17T10:00:00.000Z","y":-54},{"x":"2017-08-18T10:00:00.000Z","y":-76}]"></ec-series-line></ec-chart>line without interpolation
<ec-chart domain-type="time">
<ec-series-line name="Data" interpolate="false" data="[{"x":"2017-08-13T10:00:00.000Z","y":16},{"x":"2017-08-14T10:00:00.000Z","y":-24},{"x":"2017-08-15T10:00:00.000Z","y":131},{"x":"2017-08-16T10:00:00.000Z","y":-14},{"x":"2017-08-17T10:00:00.000Z","y":-54},{"x":"2017-08-18T10:00:00.000Z","y":-76}]"></ec-series-line>
</ec-chart>
<ec-chart domain-type="time"><ec-series-line name="Data" interpolate="false" data="[{"x":"2017-08-13T10:00:00.000Z","y":16},{"x":"2017-08-14T10:00:00.000Z","y":-24},{"x":"2017-08-15T10:00:00.000Z","y":131},{"x":"2017-08-16T10:00:00.000Z","y":-14},{"x":"2017-08-17T10:00:00.000Z","y":-54},{"x":"2017-08-18T10:00:00.000Z","y":-76}]"></ec-series-line></ec-chart>line with marker
<ec-chart domain-type="time">
<ec-series-line name="Data" marker="true" data="[{"x":"2017-08-13T10:00:00.000Z","y":16},{"x":"2017-08-14T10:00:00.000Z","y":-24},{"x":"2017-08-15T10:00:00.000Z","y":131},{"x":"2017-08-16T10:00:00.000Z","y":-14},{"x":"2017-08-17T10:00:00.000Z","y":-54},{"x":"2017-08-18T10:00:00.000Z","y":-76}]"></ec-series-line>
</ec-chart>
<ec-chart domain-type="time"><ec-series-line name="Data" marker="true" data="[{"x":"2017-08-13T10:00:00.000Z","y":16},{"x":"2017-08-14T10:00:00.000Z","y":-24},{"x":"2017-08-15T10:00:00.000Z","y":131},{"x":"2017-08-16T10:00:00.000Z","y":-14},{"x":"2017-08-17T10:00:00.000Z","y":-54},{"x":"2017-08-18T10:00:00.000Z","y":-76}]"></ec-series-line></ec-chart>area
<ec-chart domain-type="time">
<ec-series-area name="Data" data="[{"x":"2017-08-13T10:00:00.000Z","y":16},{"x":"2017-08-14T10:00:00.000Z","y":-24},{"x":"2017-08-15T10:00:00.000Z","y":131},{"x":"2017-08-16T10:00:00.000Z","y":-14},{"x":"2017-08-17T10:00:00.000Z","y":-54},{"x":"2017-08-18T10:00:00.000Z","y":-76}]"></ec-series-area>
</ec-chart>
<ec-chart domain-type="time"><ec-series-area name="Data" data="[{"x":"2017-08-13T10:00:00.000Z","y":16},{"x":"2017-08-14T10:00:00.000Z","y":-24},{"x":"2017-08-15T10:00:00.000Z","y":131},{"x":"2017-08-16T10:00:00.000Z","y":-14},{"x":"2017-08-17T10:00:00.000Z","y":-54},{"x":"2017-08-18T10:00:00.000Z","y":-76}]"></ec-series-area></ec-chart>column
<ec-chart domain-type="discrete">
<ec-series-column name="Data" data="[{"x":"Lead","y":462},{"x":"First","y":142},{"x":"Active","y":113},{"x":"Defecting","y":43},{"x":"Inactive","y":846}]"></ec-series-column>
</ec-chart>
<ec-chart domain-type="discrete"><ec-series-column name="Data" data="[{"x":"Lead","y":462},{"x":"First","y":142},{"x":"Active","y":113},{"x":"Defecting","y":43},{"x":"Inactive","y":846}]"></ec-series-column></ec-chart>column
<ec-chart domain-type="discrete">
<ec-series-column name="Data" highlight-last data="[{"x":"Lead","y":462},{"x":"First","y":142},{"x":"Active","y":113},{"x":"Defecting","y":43},{"x":"Inactive","y":846}]"></ec-series-column>
</ec-chart>
<ec-chart domain-type="discrete"><ec-series-column name="Data" highlight-last data="[{"x":"Lead","y":462},{"x":"First","y":142},{"x":"Active","y":113},{"x":"Defecting","y":43},{"x":"Inactive","y":846}]"></ec-series-column></ec-chart>column
<ec-chart domain-type="discrete">
<ec-series-column name="Data" padding="0.5" data="[{"x":"Lead","y":462},{"x":"First","y":142},{"x":"Active","y":113},{"x":"Defecting","y":43},{"x":"Inactive","y":846}]"></ec-series-column>
</ec-chart>
<ec-chart domain-type="discrete"><ec-series-column name="Data" padding="0.5" data="[{"x":"Lead","y":462},{"x":"First","y":142},{"x":"Active","y":113},{"x":"Defecting","y":43},{"x":"Inactive","y":846}]"></ec-series-column></ec-chart>API Reference ec-chart
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| height | Defines height of the chart container in pixels. | number | 150 | |
| locale | Defines the date localisation of the chart. Known locales: en, de, es, fr, pt, ru, tr, cn | string | en | |
| strategy-min | Makes the bottom of the Y axis relative to the displayed data if set to 'reasonable'. | string | ||
| strategy-max | Makes the top of the Y axis relative to the displayed data if set to 'reasonable'. | string | ||
| axis-x-hidden | Hides X axis. | boolean | false | |
| axis-y-hidden | Hides Y axis. | boolean | false | |
| format-x | Formats X values to dateformat if set to 'date'. | string | none | |
| domain-type | Defines the type of X values. Can be 'discrete' or 'time'. | string | discrete | |
| separate-y-axes | Multiple charts can use different Y axes if set to true. | boolean | false | |
| currency | Defines currency if series format has currency. Can be any currency code or symbol. | string | EUR | |
| axisYFormatter | (property only) Formats values on Y axis with given function. | function |
API Reference ec-series
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| color | Defines the color of the series. | string | #467EBB | |
| data | Defines the data of the series. It must be an array with the following structure: [{ x: '', y: '' }] | array | [] | |
| z-index | Specifies the z-order of the series. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one. | number | 0 | |
| visible | Defines the visibility of the series. It does not display the series in chart if set to false but tooltip information will be available. | boolean | true | |
| name | Defines the name of the series. Name appears in tooltip. | string | ||
| formatY | Defines the formatting of the y data. For format definitions, check d3's format documentation: https://github.com/d3/d3-format | string | ||
| hidden-in-tooltip | Defines the visibility of the series in the tooltip. | boolean | false |
API Reference ec-series-line
Same properties as ec-series and the following:
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| interpolate | Defines line interpolation. | boolean | true | |
| marker | Draws marker points if set to true. | boolean | false |
API Reference ec-series-area
Same properties as ec-series-line
API Reference ec-series-column
Same properties as ec-series and the following:
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| highlight-last | Turn on/off last column highlight with darker color. | boolean | false | |
| padding | Defines the padding between columns. Value should be between 0 and 1. | number | 0 |