Charts API
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 | ||
| axis-x-date-format | Defines format of the date value on X axis. Valid values are the same as on e-time component. | string | mmd | |
| tooltip-x-date-format | Defines format of the date value in tooltip header. Valid values are the same as on e-time component. | string | ymd | |
| custom-tooltip | Customizes the content of tooltips | object | ||
| loading | Forces loading state on chart | boolean | false | |
| animation-disabled | Disables the animation of data | boolean | false |
API Reference ec-series
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| color | Defines the color of the series. It can use colors from palette as well like 'blue-500'. | string | blue-500 | |
| data | Defines the data of the series. It must be an array with the following structure: [{ x: '', y: '' }]. The y value can be null and this represents missing data. | 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 | ||
| format-y | Defines the formatting of the y data. All fraction digits are kept by default. For format definitions, check d3's format documentation: https://github.com/d3/d3-format. Functions can be used too. | string, function | ||
| hidden-in-tooltip | Defines the visibility of the series in the tooltip. | boolean | false | |
| highlight | Defines the highlighted series. All the other series gets opacity. There could be more than one series with highlight attribute. | 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 | |
| line-style | Defines the style of line. | ['solid', 'dashed'] | solid |
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 |