<c-chart type="bar" responsive="true"
stylecss="position: relative; margin: auto;"
events='["click"]'>
<c-dataset labels='["Blue", "Orange",
"Yellow", "Green", "Light Blue",
"Purple"]'>
<c-data label="# of Votes" detail="[12,
19, 7, 9, 5, 15]" backgroundcolor='[
"rgba(82, 183, 216, 0.2)",
"rgba(225, 96, 50, 0.2)",
"rgba(255, 176, 59, 0.2)",
"rgba(84, 167, 123, 0.2)",
"rgba(79, 210, 210, 0.2)",
"rgba(226, 135, 178, 0.2)"
]' bordercolor='[
"rgba(82, 183, 216, 1)",
"rgba(225, 96, 50, 1)",
"rgba(255, 176, 59, 1)",
"rgba(84, 167, 123, 1)",
"rgba(79, 210, 210, 1)",
"rgba(226, 135, 178, 1)"
]' borderwidth="1"></c-data>
</c-dataset>
<c-title text="Bar Chart"></c-title>
<c-legend position="right"></c-legend>
<c-animation duration="2000"
easing="easeInBounce"> </c-animation>
<c-cartesian-category-axis axis="x"
position="top"></c-cartesian-category-axis>
</c-chart>
<c-chart type="line" responsive="true">
<c-dataset labels='["January",
"February", "March", "April",
"May", "June", "July"]'>
<c-data label="My First dataset"
detail="[10, 30, 46, 2, 8, 50, 0]" bordercolor="rgba(119,
185, 242, 1)"
backgroundcolor="rgba(119, 185, 242,
0.2)"></c-data>
</c-dataset>
<c-title text="Line Chart"></c-title>
</c-chart>
<c-chart type="line" responsive="true">
<c-dataset labels='["January",
"February", "March", "April",
"May", "June", "July"]'>
<c-data label="My First dataset"
backgroundcolor="rgba(82, 183, 216, 1)"
bordercolor="rgba(82, 183, 216, 0.2)"
detail="[10, 30, 46, 2, 8, 50, 0]"
fill="false"></c-data>
<c-data label="My Second dataset"
detail="[7, 49, 46, 13, 25, 30, 22]"
backgroundcolor="rgba(84, 167, 123, 1)"
bordercolor="rgba(84, 167, 123, 0.2)"
fill="false"></c-data>
</c-dataset>
<c-title text="Line Chart"></c-title>
<c-tooltip position="nearest" mode="index"
enabled="true"></c-tooltip>
<c-line-configuration
tension="0.4"></c-line-configuration>
<c-cartesian-axis axis="x" position="top"
type="category"></c-cartesian-axis>
<c-cartesian-linear-axis axis="y"
position="right" ticks-min="-10"
title-display="true"
title-labelstring="yAxis items"
grid-zerolinecolor="rgba(225, 96, 50, 1"
grid-zerolinewidth="3">
</c-cartesian-linear-axis>
</c-chart>
<c-chart type="pie" responsive="true">
<c-dataset labels='["OK", "WARNING",
"CRITICAL", "UNKNOWN"]'>
<c-data label="# of Tomatoes" detail="[12,
19, 3, 5]" backgroundcolor='[
"rgba(206, 103, 22, 1)",
"rgba(245, 150, 35, 1)",
"rgba(245, 192, 98, 1)",
"rgba(245, 222, 152, 1)"
]'></c-data>
</c-dataset>
<c-title text="Pie Chart"></c-title>
<c-legend position="right"></c-legend>
</c-chart>
<c-chart type="doughnut" responsive="true">
<c-dataset labels='["OK", "WARNING",
"CRITICAL", "UNKNOWN"]'>
<c-data label="# of Tomatoes" detail="[12,
19, 3, 5]" backgroundcolor='[
"rgba(14, 110, 206, 1)",
"rgba(45, 156, 237, 1)",
"rgba(104, 206, 238, 1)",
"rgba(150, 242, 238, 1)"
]'></c-data>
</c-dataset>
<c-title text="Doughnut Chart"></c-title>
<c-legend position="left"></c-legend>
<c-arc-configuration bordercolor="rgba(7, 62, 146,
0.7)"></c-arc-configuration>
</c-chart>
<c-chart type="bubble" responsive="true">
<c-dataset>
<c-data label="John"
detail='[\{"x": 3,"y": 7,"r":
10\}, \{"x": 5,"y": 4,"r":
5\}, \{"x": 3,"y": 4,"r":
5\}]'
backgroundcolor="rgba(82, 183, 216,
1)"></c-data>
<c-data label="Paul"
detail='[\{"x": 2,"y": 2,"r":
2\}, \{"x": 6,"y": 5,"r":
10\}, \{"x": 4,"y": 2,"r":
5\}]'
backgroundcolor="rgba(225, 96, 50,
1)"></c-data>
<c-data label="Ringo"
detail='[\{"x": 1,"y":
3,"r": 10\}, \{"x": 3,"y":
3,"r": 10\}, \{"x": 6,"y":
4,"r": 10\}]'
backgroundcolor="rgba(255, 176, 59,
1)"></c-data>
</c-dataset>
<c-title text="Bubble Chart"></c-title>
<c-legend position="bottom"></c-legend>
</c-chart>
<c-chart slot="chartExample" type="scatter"
responsive="true">
<c-dataset labels='["January",
"February", "March", "April",
"May", "June", "July"]'>
<c-data label="My First dataset"
detail='[\{"x":10,"y":5\},
\{"x":30,"y":10\},
\{"x":46,"y":12\},
\{"x":2,"y":20\},
\{"x":8,"y":15\},
\{"x":50,"y":10\},
\{"x":0,"y":25\}]'
backgroundcolor="rgba(255, 176, 59, 1)"
bordercolor="rgba(255, 176, 59, 1)"
fill="false"></c-data>
</c-dataset>
<c-title text="Scatter Chart"></c-title>
<c-tooltip position="nearest" mode="index"
enabled="true"></c-tooltip>
</c-chart>
<c-chart type="bar" responsive="true">
<c-dataset labels='["January",
"February", "March", "April",
"May", "June", "July"]'>
<c-data label="My First dataset"
detail="[10, 30, 46, 2, 8, 50, 0]"
backgroundcolor="rgba(82, 183, 216, 1)"
bordercolor="rgba(82, 183, 216, 1)"
fill="false" order="2"></c-data>
<c-data label="My Second dataset"
detail="[7, 49, 46, 13, 25, 30, 22]"
backgroundcolor="rgba(255, 176, 59, 1)"
bordercolor="rgba(255, 176, 59, 1)"
fill="false" order="1"
type="line"></c-data>
</c-dataset>
<c-title text="Mix Chart"></c-title>
<c-tooltip position="nearest" mode="index"
enabled="true"></c-tooltip>
</c-chart>
<c-chart type="radar">
<c-dataset labels='["Eating",
"Drinking", "Sleeping", "Designing",
"Coding", "Cycling",
"Running"]'>
<c-data label="My First dataset"
detail="[65, 59, 90, 81, 56, 55, 40]"
backgroundcolor="rgba(82, 183, 216, 0.2)"
bordercolor="rgba(82, 183, 216, 1)"
pointhoverbackgroundcolor="#000"
pointhoverbordercolor="#000"></c-data>
<c-data label="My Second dataset"
detail="[28, 48, 40, 19, 96, 27, 100]"
backgroundcolor="rgba(255, 176, 59, 0.2)"
bordercolor="rgba(255, 176, 59, 1)"></c-data>
</c-dataset>
<c-title text="Radar Chart"></c-title>
</c-chart>
<c-chart type="polarArea">
<c-dataset labels='["Eating",
"Drinking", "Sleeping"]'>
<c-data label="My First dataset"
detail="[41, 38, 35]"
backgroundcolor='["rgba(119, 185, 242, .75)",
"rgba(195, 152, 245, .75)","rgba(78, 212, 205,
.75)"]'
bordercolor='["rgba(119, 185, 242, 1)",
"rgba(195, 152, 245, 1)","rgba(78, 212, 205,
1)"]'>
</c-data>
</c-dataset>
<c-title text="Polar Area
Chart"></c-title>
</c-chart>
<c-chart type="bar" responsive="true">
<c-title text="Category"></c-title>
<c-dataset labels='["OK", "WARNING",
"CRITICAL", "UNKNOWN"]'>
<c-data label="# of tomatoes" detail="[12,
19, 3, 5]" backgroundcolor='[
"rgba(82, 183, 216, 1)",
"rgba(225, 96, 50, 1)",
"rgba(255, 176, 59, 1)",
"rgba(84, 167, 123, 1)"
]'></c-data>
</c-dataset>
<c-cartesian-category-axis axis="x"
position="top" title-display="true"
title-labelstring="Category axis">
</c-cartesian-category-axis>
<c-cartesian-linear-axis axis="y"
ticks-stepsize="15" position="right"
title-display="true" title-labelstring="Linear
axis"></c-cartesian-linear-axis>
</c-chart>
<c-chart type="bar" responsive="true">
<c-dataset labels='["Item 1","Item
2","Item 3","Item 4", "Item
5","Item 6","Item 7"]'>
<c-data label="Neutral" detail="[40, 47,
44, 38, 27, 31, 25]" backgroundcolor='rgba(50, 150, 237,
1)' stack="1"></c-data>
<c-data label="Warning" detail="[10, 12,
7, 5, 4, 6, 8]" backgroundcolor='rgba(119, 185, 242, 1)'
stack="1"></c-data>
<c-data label="Error" detail="[17, 11, 22,
18, 12, 7, 5]" backgroundcolor='rgba(157, 83, 242, 1)'
stack="1"></c-data>
</c-dataset>
<c-cartesian-axis axis="x" stacked="true"
>
</c-cartesian-axis>
<c-cartesian-axis axis="y"
stacked="true"></c-cartesian-axis>
</c-chart>