Charts
This chart system is based on d3js.
Usage
The component is not part of the main ui framework, You should include additional files to use it in production:
<script src="https://redirector.eservice.emarsys.net/ui-charts/latest/app.js"></script>and in staging:
<script src="https://redirector-staging.eservice.emarsys.com/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>JavaScript
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>JavaScript
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>JavaScript
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>JavaScript
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>JavaScript
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>JavaScript
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>JavaScript
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>JavaScript
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>JavaScript
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>JavaScript
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>JavaScript
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>JavaScript
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>JavaScript
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>JavaScript
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>JavaScript
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>JavaScript
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>JavaScript
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>JavaScript
Time data with irregular intervals
<ec-chart height="170" domain-type="time">
<ec-series-area name="Revenue" color="#3DA53C" data="[{"x":"2018-06-03","y":6700,"tooltip":{"x":"2018-06-03","y":"30000"}},{"x":"2018-06-04","y":18000,"tooltip":{"x":"2018-06-04"}},{"x":"2018-06-05","y":25651,"tooltip":{"x":"2018-06-05"}},{"x":"2018-06-06","y":20000,"tooltip":{"x":"2018-06-06"}},{"x":"2018-06-07","y":23852,"tooltip":{"x":"2018-06-07"}}]"></ec-series-area>
<ec-series-line name="Revenue" color="#267FB7" line-style="dashed" data="[{"x":"2018-06-03","y":21218,"tooltip":{"x":"2017-06-03"}},{"x":"2018-06-04","y":22852,"tooltip":{"x":"2017-06-04"}},{"x":"2018-06-05","y":6800,"tooltip":{"x":"2017-06-05"}},{"x":"2018-06-06","y":26792,"tooltip":{"x":"2017-06-06"}},{"x":"2018-06-07","y":18000,"tooltip":{"x":"2017-06-07"}}]"></ec-series-line>
</ec-chart><ec-chart height="170" domain-type="time">
<ec-series-area name="Revenue" color="#3DA53C" data="[{"x":"2018-06-03","y":6700,"tooltip":{"x":"2018-06-03","y":"30000"}},{"x":"2018-06-04","y":18000,"tooltip":{"x":"2018-06-04"}},{"x":"2018-06-05","y":25651,"tooltip":{"x":"2018-06-05"}},{"x":"2018-06-06","y":20000,"tooltip":{"x":"2018-06-06"}},{"x":"2018-06-07","y":23852,"tooltip":{"x":"2018-06-07"}}]"></ec-series-area>
<ec-series-line name="Revenue" color="#267FB7" line-style="dashed" data="[{"x":"2018-06-03","y":21218,"tooltip":{"x":"2017-06-03"}},{"x":"2018-06-04","y":22852,"tooltip":{"x":"2017-06-04"}},{"x":"2018-06-05","y":6800,"tooltip":{"x":"2017-06-05"}},{"x":"2018-06-06","y":26792,"tooltip":{"x":"2017-06-06"}},{"x":"2018-06-07","y":18000,"tooltip":{"x":"2017-06-07"}}]"></ec-series-line>
</ec-chart>JavaScript
dateformat
<ec-chart domain-type="time" tooltip-x-date-format="time" axis-x-date-format="time" format-x="date">
<ec-series-area name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":16},{"x":"2017-08-14T12:00:00.000Z","y":-24},{"x":"2017-08-15T10:40:00.000Z","y":131},{"x":"2017-08-16T10:55:00.000Z","y":-14},{"x":"2017-08-17T15:00:40.000Z","y":-54},{"x":"2017-08-18T11:30:00.000Z","y":-76}]"></ec-series-area>
</ec-chart><ec-chart domain-type="time" tooltip-x-date-format="time" axis-x-date-format="time" format-x="date">
<ec-series-area name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":16},{"x":"2017-08-14T12:00:00.000Z","y":-24},{"x":"2017-08-15T10:40:00.000Z","y":131},{"x":"2017-08-16T10:55:00.000Z","y":-14},{"x":"2017-08-17T15:00:40.000Z","y":-54},{"x":"2017-08-18T11:30:00.000Z","y":-76}]"></ec-series-area>
</ec-chart>JavaScript
With custom tooltips
<ec-chart id="customtooltipvariation" height="170" domain-type="discrete">
<ec-series-column name="Name" padding="0.5" format-y=".1%" color="#68BC6E"></ec-series-column>
</ec-chart><ec-chart id="customtooltipvariation" height="170" domain-type="discrete">
<ec-series-column name="Name" padding="0.5" format-y=".1%" color="#68BC6E"></ec-series-column>
</ec-chart>JavaScript
(function() {
var chart = document.getElementById('customtooltipvariation');
var series = chart.querySelector('ec-series-column');
series.data = [
{ x: 'Points', y: 0.61 },
{ x: 'Cash', y: 0.70 },
{ x: 'Discount', y: 0.55 },
{ x: 'Service', y: 0.90 },
{ x: 'Gift', y: 0.62 }
];
chart.customTooltip = {
'Points': {
rows: [
{ value: 2433567, label: 'Points delivered', type: 'header', valueFormat: { type: 'number' }, color: 'red' },
{ label: 'Top points usages:' },
{
value: 0.81,
label: 'Cash Coupon',
valueFormat: {
type: 'number', options: { type: 'percent'}
},
color: 'blue'
},
{
value: 0.73,
label: 'Free Shipping',
valueFormat: {
type: 'number', options: { type: 'percent' }
}
},
{
value: 0.65,
label: 'Discount Coupon',
valueFormat: {
type: 'number', options: { type: 'percent' },
},
color: 'green'
}
]
},
'Cash': {
rows: [
{ value: 567303, label: 'Cash delivered', type: 'header', valueFormat: { type: 'number' } },
{ label: 'Top cash usages:' },
{
value: 0.571,
label: 'Cash Coupon',
valueFormat: {
type: 'number', options: { type: 'percent'}
}
},
{
value: 0.75,
label: 'Free Shipping',
valueFormat: {
type: 'number', options: { type: 'percent' }
}
},
{
value: 0.85,
label: 'Discount Coupon',
valueFormat: {
type: 'number', options: { type: 'percent' }
}
}
]
},
'Discount': {
rows: [
{ value: 560790, label: 'Discount delivered', type: 'header', valueFormat: { type: 'number' } },
{ label: 'Top discount usages:' },
{
value: 0.63,
label: 'Cash Coupon',
valueFormat: {
type: 'number', options: { type: 'percent'}
}
},
{
value: 0.35,
label: 'Free Shipping',
valueFormat: {
type: 'number', options: { type: 'percent' }
}
},
{
value: 0.65,
label: 'Discount Coupon',
valueFormat: {
type: 'number', options: { type: 'percent' }
}
}
]
},
'Service': {
rows: [
{ value: 457032, label: 'Discount delivered', type: 'header', valueFormat: { type: 'number' } },
{ label: 'Top service usages:' },
{
value: 0.53,
label: 'Cash Coupon',
valueFormat: {
type: 'number', options: { type: 'percent'}
}
},
{
value: 0.58,
label: 'Free Shipping',
valueFormat: {
type: 'number', options: { type: 'percent' }
}
},
{
value: 0.85,
label: 'Discount Coupon',
valueFormat: {
type: 'number', options: { type: 'percent' }
}
}
]
},
'Gift': {
rows: [
{ value: 487092, label: 'Discount delivered', type: 'header', valueFormat: { type: 'number' } },
{ label: 'Top gift usages:' },
{
value: 0.45,
label: 'Cash Coupon',
valueFormat: {
type: 'number', options: { type: 'percent'}
}
},
{
value: 0.62,
label: 'Free Shipping',
valueFormat: {
type: 'number', options: { type: 'percent' }
}
},
{
value: 0.18,
label: 'Discount Coupon',
valueFormat: {
type: 'number', options: { type: 'percent' }
}
}
]
}
}
})();
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 |
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. All fraction digits are kept by default. 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 | |
| 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 |