# Chart

[component-header:sl-chart]

Chart is awesome

```html preview
<sl-chart style="height:200px"></sl-chart>

<script>
var chart = document.querySelector('sl-chart');
chart.type = 'line';
chart.data = {
    labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
    datasets: [{ 
        data: [86,114,106,106,107,111,133,221,783,2478],
        borderColor: "#3e95cd",
        fill: false
      }
    ]
  };
chart.options = {
    responsive: true, 
    maintainAspectRatio: false,
    legend: {
        display: false
    },
    scales: {
            yAxes: [{
                gridLines: {
                    display: false
                },
                ticks: {
                    beginAtZero: true,
                    display: false
                }
            }],
            xAxes: [{
                gridLines: {
                    display: false
                },
                ticks: {
                    display: false
                }
            }]
        }
  };
</script>
```

[component-metadata:sl-chart]