Bar Chart

                
<bar-chart 
  id="bar"
  data='[
      { "year": "2013", "and": 10, "ios": 5, "win": 2 },
      { "year": "2014", "and": 10, "ios": 15, "win": 3 },
      { "year": "2015", "and": 20, "ios": 25, "win": 2 },
      { "year": "2016", "and": 30, "ios": 20, "win": 1 },
    ]'
  xkey="year"
  ykeys='[ "and", "ios", "win" ]'
  bar-colors='[ "#FF6384", "#36A2EB", "#FFCE56" ]' 
  grid="true"
  grid-text-weight="bold"
  resize="true"
  hide-hover="auto">
</bar-chart>
                
              

Line Chart (with values modified every 5 seconds)

                
<line-chart 
  id="line"
  data='[
      { "year": "2013", "a": 10, "b": 5 },
      { "year": "2014", "a": 40, "b": 15 },
      { "year": "2015", "a": 20, "b": 25 },
      { "year": "2016", "a": 30, "b": 20 },
    ]'
  xkey="year"
  ykeys='[ "a", "b" ]'
  line-colors='[ "#FF6384", "#36A2EB" ]' 
  grid="true"
  grid-text-weight="bold"
  events='[ "2015 " ]'
  event-stroke-width="5"
  event-line-colors='[ "#ff0000" ]'
  resize="true">
</line-chart>
                
              

Donut Chart

                
<donut-chart 
  id="donut" 
  :data="donutData" 
  colors='[ "#FF6384", "#36A2EB", "#FFCE56" ]' 
  resize="true">
</donut-chart>

<script>
new Vue({
  data: {
    donutData: [
      { label: 'Red', value: 300 },
      { label: 'Blue', value: 50 },
      { label: 'Yellow', value: 100 }
    ]
  },
  components: { DonutChart }
})
</script>
                
              

Area Chart

                
<area-chart 
  id="area"
  data='[
      { "year": "2013", "a": 30, "b": 5 },
      { "year": "2014", "a": 25, "b": 15 },
      { "year": "2015", "a": 29, "b": 25 },
      { "year": "2016", "a": 50, "b": 20 },
    ]'
  xkey="year"
  ykeys='[ "a", "b" ]'
  line-colors='[ "#FF6384", "#36A2EB" ]' 
  grid="true"
  grid-text-weight="bold"
  x-label-angle="45"
  hide-hover="always"
  resize="true">
</area-chart>
                
              

Area Chart Example with the default value for xkey, ykeys and labels

                
  <area-chart 
    id="area"
    data='[
        { "key": "2013", "value": 30 },
        { "key": "2014", "value": 25 },
        { "key": "2015", "value": 29 },
        { "key": "2016", "value": 50 }
      ]'
    line-colors='[ "#FF6384", "#36A2EB" ]' 
    grid="true"
    grid-text-weight="bold"
    resize="true">
  </area-chart>