Usage with Lit

<vaadin-chart title="Column Chart" type="column" .categories="${['Jan', 'Feb', 'Mar']}">
  <vaadin-chart-series title="Tokyo" .values="${[49.9, 71.5, 106.4]}"></vaadin-chart-series>
  <vaadin-chart-series title="New York" .values="${[83.6, 78.8, 98.5]}"></vaadin-chart-series>
  <vaadin-chart-series title="London" .values="${[48.9, 38.8, 39.3]}"></vaadin-chart-series>
</vaadin-chart>

<vaadin-chart
  type="area"
  title="Area Chart"
  stacking="normal"
  .categories="${'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'.split(',')}"
>
  <vaadin-chart-series
    title="United States dollar"
    .values="${[135, 125, 89, 124, 105, 81, 111, 94, 95, 129, 98, 84]}"
  ></vaadin-chart-series>
  <vaadin-chart-series
    title="Euro"
    .values="${[62, 72, 89, 68, 94, 92, 110, 100, 109, 89, 86, 105]}"
  ></vaadin-chart-series>
  <vaadin-chart-series
    title="Japanese yen"
    .values="${[30, 25, 32, 26, 15, 31, 24, 32, 21, 8, 12, 32]}"
  ></vaadin-chart-series>
  <vaadin-chart-series
    title="Pound sterling"
    .values="${[32, 21, 8, 12, 32, 21, 12, 30, 25, 19, 26, 15]}"
  ></vaadin-chart-series>
</vaadin-chart>

<vaadin-chart type="pie" title="Pie Chart" tooltip>
  <vaadin-chart-series
    title="Brands"
    .values="${[
      { name: 'Chrome', y: 38 },
      { name: 'Firefox', y: 24 },
      { name: 'Edge', y: 15, sliced: true, selected: true },
      { name: 'Internet Explorer', y: 8 },
    ]}"
  ></vaadin-chart-series>
</vaadin-chart>

<vaadin-chart polar title="Polar Chart">
  <vaadin-chart-series
    type="column"
    title="Column"
    .values="${[8, 7, 6, 5, 4, 3, 2, 1]}"
  ></vaadin-chart-series>
  <vaadin-chart-series
    type="line"
    title="Line"
    .values="${[1, 2, 3, 4, 5, 6, 7, 8]}"
  ></vaadin-chart-series>
  <vaadin-chart-series
    type="area"
    title="Area"
    .values="${[1, 8, 2, 7, 3, 6, 4, 5]}"
  ></vaadin-chart-series>
</vaadin-chart>