A JSX component which can be used to client side render a chart inline within a page.

View ChartProps for a list of properties that can be set on the component.

Example

import { Chart } from "https://deno.land/x/fresh_charts/island.tsx";
import { ChartColors } from "https://deno.land/x/fresh_charts/utils.ts";

export default App() {
  return <>
    <h1>Chart Example</h1>
    <Chart
      type="line"
      options={{
        scales: { yAxes: [{ ticks: { beginAtZero: true } }] },
      }}
      data={{
        labels: ["1", "2", "3"],
        datasets: [{
          label: "Sessions",
          data: [123, 234, 234],
          borderColor: ChartColors.Red,
          borderWidth: 1,
        }, {
          label: "Users",
          data: [346, 233, 123],
          borderColor: ChartColors.Blue,
          borderWidth: 1,
        }],
      }}
    />
  <>;
}