Link copied!

Charts Examples

<ec-chart domain-type="time">
  <ec-series-line data="[{&quot;x&quot;:&quot;2017-08-13T10:00:00.000Z&quot;,&quot;y&quot;:-16},{&quot;x&quot;:&quot;2017-08-14T10:00:00.000Z&quot;,&quot;y&quot;:24},{&quot;x&quot;:&quot;2017-08-15T10:00:00.000Z&quot;,&quot;y&quot;:-131},{&quot;x&quot;:&quot;2017-08-16T10:00:00.000Z&quot;,&quot;y&quot;:14},{&quot;x&quot;:&quot;2017-08-17T10:00:00.000Z&quot;,&quot;y&quot;:54},{&quot;x&quot;:&quot;2017-08-18T10:00:00.000Z&quot;,&quot;y&quot;:76}]"></ec-series-line>
</ec-chart>
<ec-chart domain-type="time" height="80">
  <ec-series name="Data01" color="chart-02" data="[{&quot;x&quot;:&quot;2017-08-13T10:00:00.000Z&quot;,&quot;y&quot;:-16},{&quot;x&quot;:&quot;2017-08-14T10:00:00.000Z&quot;,&quot;y&quot;:24},{&quot;x&quot;:&quot;2017-08-15T10:00:00.000Z&quot;,&quot;y&quot;:-131},{&quot;x&quot;:&quot;2017-08-16T10:00:00.000Z&quot;,&quot;y&quot;:14},{&quot;x&quot;:&quot;2017-08-17T10:00:00.000Z&quot;,&quot;y&quot;:54},{&quot;x&quot;:&quot;2017-08-18T10:00:00.000Z&quot;,&quot;y&quot;:76}]"></ec-series>
  <ec-series-line name="Data02" data="[{&quot;x&quot;:&quot;2017-08-13T10:00:00.000Z&quot;,&quot;y&quot;:16},{&quot;x&quot;:&quot;2017-08-14T10:00:00.000Z&quot;,&quot;y&quot;:-24},{&quot;x&quot;:&quot;2017-08-15T10:00:00.000Z&quot;,&quot;y&quot;:131},{&quot;x&quot;:&quot;2017-08-16T10:00:00.000Z&quot;,&quot;y&quot;:-14},{&quot;x&quot;:&quot;2017-08-17T10:00:00.000Z&quot;,&quot;y&quot;:-54},{&quot;x&quot;:&quot;2017-08-18T10:00:00.000Z&quot;,&quot;y&quot;:-76}]"></ec-series-line>
</ec-chart>
<ec-chart domain-type="time" height="80">
  <ec-series-line data="[{&quot;x&quot;:&quot;2017-08-13T10:00:00.000Z&quot;,&quot;y&quot;:-16},{&quot;x&quot;:&quot;2017-08-14T10:00:00.000Z&quot;,&quot;y&quot;:24},{&quot;x&quot;:&quot;2017-08-15T10:00:00.000Z&quot;,&quot;y&quot;:-131},{&quot;x&quot;:&quot;2017-08-16T10:00:00.000Z&quot;,&quot;y&quot;:14},{&quot;x&quot;:&quot;2017-08-17T10:00:00.000Z&quot;,&quot;y&quot;:54},{&quot;x&quot;:&quot;2017-08-18T10:00:00.000Z&quot;,&quot;y&quot;:76}]"></ec-series-line>
</ec-chart>
<ec-chart domain-type="time" locale="ru">
  <ec-series-line data="[{&quot;x&quot;:&quot;2017-08-13T10:00:00.000Z&quot;,&quot;y&quot;:-16},{&quot;x&quot;:&quot;2017-08-14T10:00:00.000Z&quot;,&quot;y&quot;:24},{&quot;x&quot;:&quot;2017-08-15T10:00:00.000Z&quot;,&quot;y&quot;:-131},{&quot;x&quot;:&quot;2017-08-16T10:00:00.000Z&quot;,&quot;y&quot;:14},{&quot;x&quot;:&quot;2017-08-17T10:00:00.000Z&quot;,&quot;y&quot;:54},{&quot;x&quot;:&quot;2017-08-18T10:00:00.000Z&quot;,&quot;y&quot;:76}]"></ec-series-line>
</ec-chart>
<ec-chart domain-type="time" strategy-min="reasonable" strategy-max="reasonable">
  <ec-series-line data="[{&quot;x&quot;:&quot;2017-08-13T10:00:00.000Z&quot;,&quot;y&quot;:17016},{&quot;x&quot;:&quot;2017-08-14T10:00:00.000Z&quot;,&quot;y&quot;:19024},{&quot;x&quot;:&quot;2017-08-15T10:00:00.000Z&quot;,&quot;y&quot;:16131},{&quot;x&quot;:&quot;2017-08-16T10:00:00.000Z&quot;,&quot;y&quot;:19014},{&quot;x&quot;:&quot;2017-08-17T10:00:00.000Z&quot;,&quot;y&quot;:18054},{&quot;x&quot;:&quot;2017-08-18T10:00:00.000Z&quot;,&quot;y&quot;:19076}]"></ec-series-line>
</ec-chart>
<ec-chart domain-type="time" axis-x-hidden>
  <ec-series-line data="[{&quot;x&quot;:&quot;2017-08-13T10:00:00.000Z&quot;,&quot;y&quot;:-16},{&quot;x&quot;:&quot;2017-08-14T10:00:00.000Z&quot;,&quot;y&quot;:24},{&quot;x&quot;:&quot;2017-08-15T10:00:00.000Z&quot;,&quot;y&quot;:-131},{&quot;x&quot;:&quot;2017-08-16T10:00:00.000Z&quot;,&quot;y&quot;:14},{&quot;x&quot;:&quot;2017-08-17T10:00:00.000Z&quot;,&quot;y&quot;:54},{&quot;x&quot;:&quot;2017-08-18T10:00:00.000Z&quot;,&quot;y&quot;:76}]"></ec-series-line>
</ec-chart>
<ec-chart domain-type="time" axis-y-hidden>
  <ec-series-line data="[{&quot;x&quot;:&quot;2017-08-13T10:00:00.000Z&quot;,&quot;y&quot;:-16},{&quot;x&quot;:&quot;2017-08-14T10:00:00.000Z&quot;,&quot;y&quot;:24},{&quot;x&quot;:&quot;2017-08-15T10:00:00.000Z&quot;,&quot;y&quot;:-131},{&quot;x&quot;:&quot;2017-08-16T10:00:00.000Z&quot;,&quot;y&quot;:14},{&quot;x&quot;:&quot;2017-08-17T10:00:00.000Z&quot;,&quot;y&quot;:54},{&quot;x&quot;:&quot;2017-08-18T10:00:00.000Z&quot;,&quot;y&quot;:76}]"></ec-series-line>
</ec-chart>
<ec-chart format-x="date">
  <ec-series-column padding="0.5" data="[{&quot;x&quot;:&quot;2017-08-13T10:00:00.000Z&quot;,&quot;y&quot;:16},{&quot;x&quot;:&quot;2017-08-14T10:00:00.000Z&quot;,&quot;y&quot;:24},{&quot;x&quot;:&quot;2017-08-15T10:00:00.000Z&quot;,&quot;y&quot;:131},{&quot;x&quot;:&quot;2017-08-16T10:00:00.000Z&quot;,&quot;y&quot;:14},{&quot;x&quot;:&quot;2017-08-17T10:00:00.000Z&quot;,&quot;y&quot;:54},{&quot;x&quot;:&quot;2017-08-18T10:00:00.000Z&quot;,&quot;y&quot;:76}]"></ec-series-column>
</ec-chart>
<ec-chart domain-type="discrete" separate-y-axes>
  <ec-series-column padding="0.5" name="Open on mobile" color="chart-01" data="[{&quot;x&quot;:&quot;Lead&quot;,&quot;y&quot;:462},{&quot;x&quot;:&quot;First&quot;,&quot;y&quot;:142},{&quot;x&quot;:&quot;Active&quot;,&quot;y&quot;:113},{&quot;x&quot;:&quot;Defecting&quot;,&quot;y&quot;:43},{&quot;x&quot;:&quot;Inactive&quot;,&quot;y&quot;:846}]"></ec-series-column>
  <ec-series-line axis-y-right-group z-index="1" name="Open on mobile" color="chart-02" marker="true" data="[{&quot;x&quot;:&quot;Lead&quot;,&quot;y&quot;:-16},{&quot;x&quot;:&quot;First&quot;,&quot;y&quot;:24},{&quot;x&quot;:&quot;Active&quot;,&quot;y&quot;:-131},{&quot;x&quot;:&quot;Defecting&quot;,&quot;y&quot;:14},{&quot;x&quot;:&quot;Inactive&quot;,&quot;y&quot;:54}]"></ec-series-line>
</ec-chart>
<ec-chart domain-type="time" currency="USD">
  <ec-series-line format-y="$," data="[{&quot;x&quot;:&quot;2017-08-13T10:00:00.000Z&quot;,&quot;y&quot;:-16},{&quot;x&quot;:&quot;2017-08-14T10:00:00.000Z&quot;,&quot;y&quot;:24},{&quot;x&quot;:&quot;2017-08-15T10:00:00.000Z&quot;,&quot;y&quot;:-131},{&quot;x&quot;:&quot;2017-08-16T10:00:00.000Z&quot;,&quot;y&quot;:14},{&quot;x&quot;:&quot;2017-08-17T10:00:00.000Z&quot;,&quot;y&quot;:54},{&quot;x&quot;:&quot;2017-08-18T10:00:00.000Z&quot;,&quot;y&quot;:76}]"></ec-series-line>
</ec-chart>
<ec-chart domain-type="time" id="customFormatter">
  <ec-series-area id="customFormatterArea" data="[{&quot;x&quot;:&quot;2017-08-13T10:00:00.000Z&quot;,&quot;y&quot;:16},{&quot;x&quot;:&quot;2017-08-14T10:00:00.000Z&quot;,&quot;y&quot;:24},{&quot;x&quot;:&quot;2017-08-15T10:00:00.000Z&quot;,&quot;y&quot;:131},{&quot;x&quot;:&quot;2017-08-16T10:00:00.000Z&quot;,&quot;y&quot;:14},{&quot;x&quot;:&quot;2017-08-17T10:00:00.000Z&quot;,&quot;y&quot;:54},{&quot;x&quot;:&quot;2017-08-18T10:00:00.000Z&quot;,&quot;y&quot;:76}]"></ec-series-area>
</ec-chart>
<e-chart-loader></e-chart-loader>
<ec-chart domain-type="time">
  <ec-series-line name="Data" data="[{&quot;x&quot;:&quot;2017-08-13T10:00:00.000Z&quot;,&quot;y&quot;:16},{&quot;x&quot;:&quot;2017-08-14T10:00:00.000Z&quot;,&quot;y&quot;:-24},{&quot;x&quot;:&quot;2017-08-15T10:00:00.000Z&quot;,&quot;y&quot;:131},{&quot;x&quot;:&quot;2017-08-16T10:00:00.000Z&quot;,&quot;y&quot;:-14},{&quot;x&quot;:&quot;2017-08-17T10:00:00.000Z&quot;,&quot;y&quot;:-54},{&quot;x&quot;:&quot;2017-08-18T10:00:00.000Z&quot;,&quot;y&quot;:-76}]"></ec-series-line>
</ec-chart>
<ec-chart domain-type="time">
  <ec-series-line name="Data" interpolate="false" data="[{&quot;x&quot;:&quot;2017-08-13T10:00:00.000Z&quot;,&quot;y&quot;:16},{&quot;x&quot;:&quot;2017-08-14T10:00:00.000Z&quot;,&quot;y&quot;:-24},{&quot;x&quot;:&quot;2017-08-15T10:00:00.000Z&quot;,&quot;y&quot;:131},{&quot;x&quot;:&quot;2017-08-16T10:00:00.000Z&quot;,&quot;y&quot;:-14},{&quot;x&quot;:&quot;2017-08-17T10:00:00.000Z&quot;,&quot;y&quot;:-54},{&quot;x&quot;:&quot;2017-08-18T10:00:00.000Z&quot;,&quot;y&quot;:-76}]"></ec-series-line>
</ec-chart>
<ec-chart domain-type="time">
  <ec-series-line name="Data" marker="true" data="[{&quot;x&quot;:&quot;2017-08-13T10:00:00.000Z&quot;,&quot;y&quot;:16},{&quot;x&quot;:&quot;2017-08-14T10:00:00.000Z&quot;,&quot;y&quot;:-24},{&quot;x&quot;:&quot;2017-08-15T10:00:00.000Z&quot;,&quot;y&quot;:131},{&quot;x&quot;:&quot;2017-08-16T10:00:00.000Z&quot;,&quot;y&quot;:-14},{&quot;x&quot;:&quot;2017-08-17T10:00:00.000Z&quot;,&quot;y&quot;:-54},{&quot;x&quot;:&quot;2017-08-18T10:00:00.000Z&quot;,&quot;y&quot;:-76}]"></ec-series-line>
</ec-chart>
<ec-chart domain-type="time">
  <ec-series-area name="Data" data="[{&quot;x&quot;:&quot;2017-08-13T10:00:00.000Z&quot;,&quot;y&quot;:16},{&quot;x&quot;:&quot;2017-08-14T10:00:00.000Z&quot;,&quot;y&quot;:-24},{&quot;x&quot;:&quot;2017-08-15T10:00:00.000Z&quot;,&quot;y&quot;:131},{&quot;x&quot;:&quot;2017-08-16T10:00:00.000Z&quot;,&quot;y&quot;:-14},{&quot;x&quot;:&quot;2017-08-17T10:00:00.000Z&quot;,&quot;y&quot;:-54},{&quot;x&quot;:&quot;2017-08-18T10:00:00.000Z&quot;,&quot;y&quot;:-76}]"></ec-series-area>
</ec-chart>
<ec-chart domain-type="discrete">
  <ec-series-column name="Data" data="[{&quot;x&quot;:&quot;Lead&quot;,&quot;y&quot;:462},{&quot;x&quot;:&quot;First&quot;,&quot;y&quot;:142},{&quot;x&quot;:&quot;Active&quot;,&quot;y&quot;:113},{&quot;x&quot;:&quot;Defecting&quot;,&quot;y&quot;:43},{&quot;x&quot;:&quot;Inactive&quot;,&quot;y&quot;:846}]"></ec-series-column>
</ec-chart>
<ec-chart domain-type="discrete">
  <ec-series-column name="Data" data="[{&quot;x&quot;:&quot;Lead&quot;,&quot;y&quot;:462,&quot;color&quot;:&quot;chart-01&quot;},{&quot;x&quot;:&quot;First&quot;,&quot;y&quot;:142,&quot;color&quot;:&quot;chart-02&quot;}]"></ec-series-column>
</ec-chart>
<ec-chart height="196" format-x="date" domain-type="time">
  <ec-series-stack name="Total">
    <ec-series-stack-area order="5" color="chart-05" name="Area 5" data="[{&quot;x&quot;:&quot;2017-08-12T11:30:00.000Z&quot;,&quot;y&quot;:727}, {&quot;x&quot;:&quot;2017-08-13T11:30:00.000Z&quot;,&quot;y&quot;:1226}, {&quot;x&quot;:&quot;2017-08-14T11:30:00.000Z&quot;,&quot;y&quot;:1329}, {&quot;x&quot;:&quot;2017-08-15T11:30:00.000Z&quot;,&quot;y&quot;:267}, {&quot;x&quot;:&quot;2017-08-16T11:30:00.000Z&quot;,&quot;y&quot;:727}, {&quot;x&quot;:&quot;2017-08-17T11:30:00.000Z&quot;,&quot;y&quot;:1226}]"></ec-series-stack-area>
    <ec-series-stack-area order="4" color="chart-04" name="Area 4" data="[{&quot;x&quot;:&quot;2017-08-12T11:30:00.000Z&quot;,&quot;y&quot;:2453}, {&quot;x&quot;:&quot;2017-08-13T11:30:00.000Z&quot;,&quot;y&quot;:2453}, {&quot;x&quot;:&quot;2017-08-14T11:30:00.000Z&quot;,&quot;y&quot;:267}, {&quot;x&quot;:&quot;2017-08-15T11:30:00.000Z&quot;,&quot;y&quot;:727}, {&quot;x&quot;:&quot;2017-08-16T11:30:00.000Z&quot;,&quot;y&quot;:1226}, {&quot;x&quot;:&quot;2017-08-17T11:30:00.000Z&quot;,&quot;y&quot;:1329}]"></ec-series-stack-area>
    <ec-series-stack-area order="3" color="chart-03" name="Area 3" data="[{&quot;x&quot;:&quot;2017-08-12T11:30:00.000Z&quot;,&quot;y&quot;:244}, {&quot;x&quot;:&quot;2017-08-13T11:30:00.000Z&quot;,&quot;y&quot;:8264}, {&quot;x&quot;:&quot;2017-08-14T11:30:00.000Z&quot;,&quot;y&quot;:2472}, {&quot;x&quot;:&quot;2017-08-15T11:30:00.000Z&quot;,&quot;y&quot;:4434}, {&quot;x&quot;:&quot;2017-08-16T11:30:00.000Z&quot;,&quot;y&quot;:273}, {&quot;x&quot;:&quot;2017-08-17T11:30:00.000Z&quot;,&quot;y&quot;:727}]"></ec-series-stack-area>
    <ec-series-stack-area order="2" color="chart-02" name="Area 2" data="[{&quot;x&quot;:&quot;2017-08-12T11:30:00.000Z&quot;,&quot;y&quot;:4326}, {&quot;x&quot;:&quot;2017-08-13T11:30:00.000Z&quot;,&quot;y&quot;:4434}, {&quot;x&quot;:&quot;2017-08-14T11:30:00.000Z&quot;,&quot;y&quot;:273}, {&quot;x&quot;:&quot;2017-08-15T11:30:00.000Z&quot;,&quot;y&quot;:727}, {&quot;x&quot;:&quot;2017-08-16T11:30:00.000Z&quot;,&quot;y&quot;:1226}, {&quot;x&quot;:&quot;2017-08-17T11:30:00.000Z&quot;,&quot;y&quot;:1329}]"></ec-series-stack-area>
    <ec-series-stack-area order="1" color="chart-01" name="Area 1" data="[{&quot;x&quot;:&quot;2017-08-12T11:30:00.000Z&quot;,&quot;y&quot;:546}, {&quot;x&quot;:&quot;2017-08-13T11:30:00.000Z&quot;,&quot;y&quot;:433}, {&quot;x&quot;:&quot;2017-08-14T11:30:00.000Z&quot;,&quot;y&quot;:4184}, {&quot;x&quot;:&quot;2017-08-15T11:30:00.000Z&quot;,&quot;y&quot;:4434}, {&quot;x&quot;:&quot;2017-08-16T11:30:00.000Z&quot;,&quot;y&quot;:273}, {&quot;x&quot;:&quot;2017-08-17T11:30:00.000Z&quot;,&quot;y&quot;:727}]"></ec-series-stack-area>
  </ec-series-stack>
</ec-chart>
<ec-chart height="196" format-x="date" domain-type="discrete">
  <ec-series-group padding="0.5">
    <ec-series-group-column order="5" color="chart-05" name="Column 5" data="[{&quot;x&quot;:&quot;2017-08-12T11:30:00.000Z&quot;,&quot;y&quot;:727}, {&quot;x&quot;:&quot;2017-08-13T11:30:00.000Z&quot;,&quot;y&quot;:1226}, {&quot;x&quot;:&quot;2017-08-14T11:30:00.000Z&quot;,&quot;y&quot;:1329}, {&quot;x&quot;:&quot;2017-08-15T11:30:00.000Z&quot;,&quot;y&quot;:267}, {&quot;x&quot;:&quot;2017-08-16T11:30:00.000Z&quot;,&quot;y&quot;:727}, {&quot;x&quot;:&quot;2017-08-17T11:30:00.000Z&quot;,&quot;y&quot;:1226}]"></ec-series-group-column>
    <ec-series-group-column order="4" color="chart-04" name="Column 4" data="[{&quot;x&quot;:&quot;2017-08-12T11:30:00.000Z&quot;,&quot;y&quot;:2453}, {&quot;x&quot;:&quot;2017-08-13T11:30:00.000Z&quot;,&quot;y&quot;:2453}, {&quot;x&quot;:&quot;2017-08-14T11:30:00.000Z&quot;,&quot;y&quot;:267}, {&quot;x&quot;:&quot;2017-08-15T11:30:00.000Z&quot;,&quot;y&quot;:727}, {&quot;x&quot;:&quot;2017-08-16T11:30:00.000Z&quot;,&quot;y&quot;:1226}, {&quot;x&quot;:&quot;2017-08-17T11:30:00.000Z&quot;,&quot;y&quot;:1329}]"></ec-series-group-column>
    <ec-series-group-column order="3" color="chart-03" name="Column 3" data="[{&quot;x&quot;:&quot;2017-08-12T11:30:00.000Z&quot;,&quot;y&quot;:244}, {&quot;x&quot;:&quot;2017-08-13T11:30:00.000Z&quot;,&quot;y&quot;:8264}, {&quot;x&quot;:&quot;2017-08-14T11:30:00.000Z&quot;,&quot;y&quot;:2472}, {&quot;x&quot;:&quot;2017-08-15T11:30:00.000Z&quot;,&quot;y&quot;:4434}, {&quot;x&quot;:&quot;2017-08-16T11:30:00.000Z&quot;,&quot;y&quot;:273}, {&quot;x&quot;:&quot;2017-08-17T11:30:00.000Z&quot;,&quot;y&quot;:727}]"></ec-series-group-column>
    <ec-series-group-column order="2" color="chart-02" name="Column 2" data="[{&quot;x&quot;:&quot;2017-08-12T11:30:00.000Z&quot;,&quot;y&quot;:4326}, {&quot;x&quot;:&quot;2017-08-13T11:30:00.000Z&quot;,&quot;y&quot;:4434}, {&quot;x&quot;:&quot;2017-08-14T11:30:00.000Z&quot;,&quot;y&quot;:273}, {&quot;x&quot;:&quot;2017-08-15T11:30:00.000Z&quot;,&quot;y&quot;:727}, {&quot;x&quot;:&quot;2017-08-16T11:30:00.000Z&quot;,&quot;y&quot;:1226}, {&quot;x&quot;:&quot;2017-08-17T11:30:00.000Z&quot;,&quot;y&quot;:1329}]"></ec-series-group-column>
    <ec-series-group-column order="1" color="chart-01" name="Column 1" data="[{&quot;x&quot;:&quot;2017-08-12T11:30:00.000Z&quot;,&quot;y&quot;:546}, {&quot;x&quot;:&quot;2017-08-13T11:30:00.000Z&quot;,&quot;y&quot;:433}, {&quot;x&quot;:&quot;2017-08-14T11:30:00.000Z&quot;,&quot;y&quot;:4184}, {&quot;x&quot;:&quot;2017-08-15T11:30:00.000Z&quot;,&quot;y&quot;:4434}, {&quot;x&quot;:&quot;2017-08-16T11:30:00.000Z&quot;,&quot;y&quot;:273}, {&quot;x&quot;:&quot;2017-08-17T11:30:00.000Z&quot;,&quot;y&quot;:727}]"></ec-series-group-column>
  </ec-series-group>
</ec-chart>
<ec-chart domain-type="discrete">
  <ec-series-column name="Data" highlight-last data="[{&quot;x&quot;:&quot;Lead&quot;,&quot;y&quot;:462},{&quot;x&quot;:&quot;First&quot;,&quot;y&quot;:142},{&quot;x&quot;:&quot;Active&quot;,&quot;y&quot;:113},{&quot;x&quot;:&quot;Defecting&quot;,&quot;y&quot;:43},{&quot;x&quot;:&quot;Inactive&quot;,&quot;y&quot;:846}]"></ec-series-column>
</ec-chart>
<ec-chart domain-type="discrete">
  <ec-series-column name="Data" padding="0.5" data="[{&quot;x&quot;:&quot;Lead&quot;,&quot;y&quot;:462},{&quot;x&quot;:&quot;First&quot;,&quot;y&quot;:142},{&quot;x&quot;:&quot;Active&quot;,&quot;y&quot;:113},{&quot;x&quot;:&quot;Defecting&quot;,&quot;y&quot;:43},{&quot;x&quot;:&quot;Inactive&quot;,&quot;y&quot;:846}]"></ec-series-column>
</ec-chart>
<ec-chart height="196" format-x="date" domain-type="discrete">
  <ec-series-stack padding="0.5" name="Total">
    <ec-series-stack-column order="3" color="chart-03" name="Column 3" data="[{&quot;x&quot;:&quot;2017-08-12T11:30:00.000Z&quot;,&quot;y&quot;:727}, {&quot;x&quot;:&quot;2017-08-13T11:30:00.000Z&quot;,&quot;y&quot;:1226}, {&quot;x&quot;:&quot;2017-08-14T11:30:00.000Z&quot;,&quot;y&quot;:1329}, {&quot;x&quot;:&quot;2017-08-15T11:30:00.000Z&quot;,&quot;y&quot;:267}, {&quot;x&quot;:&quot;2017-08-16T11:30:00.000Z&quot;,&quot;y&quot;:727}, {&quot;x&quot;:&quot;2017-08-17T11:30:00.000Z&quot;,&quot;y&quot;:1226}]"></ec-series-stack-column>
    <ec-series-stack-column order="2" color="chart-02" name="Column 2" data="[{&quot;x&quot;:&quot;2017-08-12T11:30:00.000Z&quot;,&quot;y&quot;:2453}, {&quot;x&quot;:&quot;2017-08-13T11:30:00.000Z&quot;,&quot;y&quot;:2453}, {&quot;x&quot;:&quot;2017-08-14T11:30:00.000Z&quot;,&quot;y&quot;:267}, {&quot;x&quot;:&quot;2017-08-15T11:30:00.000Z&quot;,&quot;y&quot;:727}, {&quot;x&quot;:&quot;2017-08-16T11:30:00.000Z&quot;,&quot;y&quot;:1226}, {&quot;x&quot;:&quot;2017-08-17T11:30:00.000Z&quot;,&quot;y&quot;:1329}]"></ec-series-stack-column>
    <ec-series-stack-column order="1" color="chart-01" name="Column 1" data="[{&quot;x&quot;:&quot;2017-08-12T11:30:00.000Z&quot;,&quot;y&quot;:244}, {&quot;x&quot;:&quot;2017-08-13T11:30:00.000Z&quot;,&quot;y&quot;:8264}, {&quot;x&quot;:&quot;2017-08-14T11:30:00.000Z&quot;,&quot;y&quot;:2472}, {&quot;x&quot;:&quot;2017-08-15T11:30:00.000Z&quot;,&quot;y&quot;:4434}, {&quot;x&quot;:&quot;2017-08-16T11:30:00.000Z&quot;,&quot;y&quot;:273}, {&quot;x&quot;:&quot;2017-08-17T11:30:00.000Z&quot;,&quot;y&quot;:727}]"></ec-series-stack-column>
  </ec-series-stack>
</ec-chart>
<ec-chart height="170" domain-type="time">
  <ec-series-area name="Revenue" color="chart-02" data="[{&quot;x&quot;:&quot;2018-06-03&quot;,&quot;y&quot;:6700,&quot;tooltip&quot;:{&quot;x&quot;:&quot;2018-06-03&quot;,&quot;y&quot;:&quot;30000&quot;}},{&quot;x&quot;:&quot;2018-06-04&quot;,&quot;y&quot;:18000,&quot;tooltip&quot;:{&quot;x&quot;:&quot;2018-06-04&quot;}},{&quot;x&quot;:&quot;2018-06-05&quot;,&quot;y&quot;:25651,&quot;tooltip&quot;:{&quot;x&quot;:&quot;2018-06-05&quot;}},{&quot;x&quot;:&quot;2018-06-06&quot;,&quot;y&quot;:20000,&quot;tooltip&quot;:{&quot;x&quot;:&quot;2018-06-06&quot;}},{&quot;x&quot;:&quot;2018-06-07&quot;,&quot;y&quot;:23852,&quot;tooltip&quot;:{&quot;x&quot;:&quot;2018-06-07&quot;}}]"></ec-series-area>
  <ec-series-line name="Revenue" color="chart-01" line-style="dashed" data="[{&quot;x&quot;:&quot;2018-06-03&quot;,&quot;y&quot;:21218,&quot;tooltip&quot;:{&quot;x&quot;:&quot;2017-06-03&quot;}},{&quot;x&quot;:&quot;2018-06-04&quot;,&quot;y&quot;:22852,&quot;tooltip&quot;:{&quot;x&quot;:&quot;2017-06-04&quot;}},{&quot;x&quot;:&quot;2018-06-05&quot;,&quot;y&quot;:6800,&quot;tooltip&quot;:{&quot;x&quot;:&quot;2017-06-05&quot;}},{&quot;x&quot;:&quot;2018-06-06&quot;,&quot;y&quot;:26792,&quot;tooltip&quot;:{&quot;x&quot;:&quot;2017-06-06&quot;}},{&quot;x&quot;:&quot;2018-06-07&quot;,&quot;y&quot;:18000,&quot;tooltip&quot;:{&quot;x&quot;:&quot;2017-06-07&quot;}}]"></ec-series-line>
</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="[{&quot;x&quot;:&quot;2017-08-13T13:00:00.000Z&quot;,&quot;y&quot;:16},{&quot;x&quot;:&quot;2017-08-14T12:00:00.000Z&quot;,&quot;y&quot;:-24},{&quot;x&quot;:&quot;2017-08-15T10:40:00.000Z&quot;,&quot;y&quot;:131},{&quot;x&quot;:&quot;2017-08-16T10:55:00.000Z&quot;,&quot;y&quot;:-14},{&quot;x&quot;:&quot;2017-08-17T15:00:40.000Z&quot;,&quot;y&quot;:-54},{&quot;x&quot;:&quot;2017-08-18T11:30:00.000Z&quot;,&quot;y&quot;:-76}]"></ec-series-area>
</ec-chart>
<ec-chart id="customtooltipvariation" height="170" domain-type="discrete">
  <ec-series-column name="Name" padding="0.5" format-y=".1%" color="chart-01"></ec-series-column>
</ec-chart>
Copy Javascript
Copied to clipboard! 
(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: 'chart-04' },
        { label: 'Top points usages:' },
        {
          value: 0.81,
          label: 'Cash Coupon',
          valueFormat: {
            type: 'number', options: { type: 'percent'}
          },
          color: 'chart-02'
        },
        {
          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: 'chart-03'
        }
      ]
    },
    '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' }
          }
        }
      ]
    }
  }
})();
<ec-chart domain-type="time">
  <ec-series-area name="Data" data="[{&quot;x&quot;:&quot;2017-08-13T10:00:00.000Z&quot;,&quot;y&quot;:16},{&quot;x&quot;:&quot;2017-08-14T10:00:00.000Z&quot;,&quot;y&quot;:-24},{&quot;x&quot;:&quot;2017-08-15T10:00:00.000Z&quot;,&quot;y&quot;:131},{&quot;x&quot;:&quot;2017-08-16T10:00:00.000Z&quot;,&quot;y&quot;:null},{&quot;x&quot;:&quot;2017-08-17T10:00:00.000Z&quot;,&quot;y&quot;:-54},{&quot;x&quot;:&quot;2017-08-18T10:00:00.000Z&quot;,&quot;y&quot;:-76}]"></ec-series-area>
</ec-chart>