A server-side-rendered charting library for Astro. Based on fresh_charts.
npm install astro-chartsThis provides a chart rendered within the page itself.
---
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>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 } },
},
});
}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>
</>
);
}MIT