---
import { Chart } from "astro-charts/components";
import { ChartColors, transparentize } from "astro-charts/utils";
---

<html lang="en">
  <head>
    <title>Example Chart</title>
  </head>
  <body>
    <div class="p-4 mx-auto max-w-screen-md">
      <Chart
        type="line"
        options={{
          devicePixelRatio: 1,
          scales: { y: { beginAtZero: true } },
        }}
        data={{
          labels: ["1", "2", "3"],
          datasets: [
            {
              label: "Sessions",
              data: [123, 234, 234],
              borderColor: ChartColors.Red,
              backgroundColor: transparentize(ChartColors.Red, 0.5),
              borderWidth: 1,
            },
            {
              label: "Users",
              data: [346, 233, 123],
              borderColor: ChartColors.Blue,
              backgroundColor: transparentize(ChartColors.Blue, 0.5),
              borderWidth: 1,
            },
          ],
        }}
      />
    </div>
  </body>
</html>

[SSR] Responding as an image

his page will provide the landing page of the site, which has an image link to an API route, which will send a request to /api/pages/chart.ts to render the chart.

/pages/index.astro

<html lang="en">
  <head>
    <title>Example Chart</title>
  </head>
  <body>
    <div class="p-4 mx-auto max-w-screen-md">
      <img
        src="/api/chart"
        class="mx-auto my-4 h-96"
        alt="an example chart provided as an image"
      />
    </div>
  </body>
</html>

/pages/api/chart.ts

import { renderChart } from "astro-charts";
import { ChartColors, transparentize } from "astro-charts/utils";

export function GET() {
  const cfg = { count: 7, min: -100, max: 100 };
  return renderChart({
    type: "line",
    data: {
      labels: ["1", "2", "3"],
      datasets: [
        {
          label: "Sessions",
          data: [123, 234, 234],
          borderColor: ChartColors.Red,
          backgroundColor: transparentize(ChartColors.Red, 0.5),
          borderWidth: 1,
        },
        {
          label: "Users",
          data: [346, 233, 123],
          borderColor: ChartColors.Blue,
          backgroundColor: transparentize(ChartColors.Blue, 0.5),
          borderWidth: 1,
        },
      ],
    },
    options: {
      devicePixelRatio: 1,
      scales: { y: { beginAtZero: true } },
    },
  });
}

[CSR] Inline chart example

import { ChartColors } from "astro-charts/utils";
import { Chart } from "astro-charts/react";

export default function Home() {
  return (
    <>
      <div class="p-4 mx-auto max-w-screen-md">
        <Chart
          type="line"
          options={{
            scales: { y: { 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,
              },
            ],
          }}
        />
      </div>
    </>
  );
}

License

MIT

Keywords

FAQs

What is astro-charts?

Is astro-charts popular?

Is astro-charts well maintained?

Package last updated on 21 Oct 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

astro-charts

astro-charts

Installation

Usage

[SSR] Inline chart example

[SSR] Responding as an image

[CSR] Inline chart example

License

Keywords

Related posts

ECMAScript 2025 Finalized with Iterator Helpers, Set Methods, RegExp.escape, and More

Node.js Homepage Adds Paid Support Link, Prompting Contributor Pushback