		@@ -7,3 +7,3 @@ import * as ChartJs from 'chart.js/auto';
		* are omitted from the underlying {@linkcode ChartJs.ChartOptions}. */
		type ChartOptions<TType extends ChartJs.ChartType = ChartJs.ChartType> = Omit<ChartJs.ChartOptions<TType>, 'responsive' \| 'responsiveAnimationDuration' \| 'events' \| 'legendCallback' \| 'onHover' \| 'onClick' \| 'onResize' \| 'hover' \| 'animation'>;
		type ChartOptions<TType extends ChartJs.ChartType = ChartJs.ChartType> = Omit<ChartJs.ChartOptions<TType>, "responsive" \| "responsiveAnimationDuration" \| "events" \| "legendCallback" \| "onHover" \| "onClick" \| "onResize" \| "hover" \| "animation">;
		/** The configuration options that are settable when rendering a chart. */
		@@ -10,0 +10,0 @@ interface ChartConfiguration<TType extends ChartJs.ChartType = ChartJs.ChartType, TData = ChartJs.DefaultDataPoint<TType>, TLabel = unknown> {

package.json

		{
		"name": "astro-charts",
		"version": "0.0.1",
		"version": "0.0.2",
		"description": "A server-side-rendered charting library for Astro.",
		@@ -36,5 +36,3 @@ "author": "Robert Soriano <sorianorobertc@gmail.com>",
		},
		"./components/*.astro": {
		"import": "./dist/components/*.astro"
		}
		"./components": "./dist/components/index.ts"
		},
		@@ -53,3 +51,7 @@ "files": [
		"devDependencies": {
		"@biomejs/biome": "1.9.3",
		"@typescript-eslint/parser": "^7.18.0",
		"eslint": "^8.57.1",
		"eslint-plugin-astro": "^1.2.4",
		"prettier": "^3.3.3",
		"prettier-plugin-astro": "^0.14.1",
		"tsup": "^8.3.0",
		@@ -64,6 +66,5 @@ "@changesets/cli": "^2.27.9"
		"changeset": "changeset",
		"lint": "biome check .",
		"lint:fix": "biome check --write .",
		"format": "biome format --write ."
		"lint": "eslint src/*/.{js,ts,astro}",
		"format": "prettier . --write"
		}
		}

README.md

		@@ -13,17 +13,19 @@ # astro-charts

		Render a chart in a page:
		### Inline chart example

		This provides a chart rendered within the page itself.

		```astro
		---
		import Chart from 'astro-charts/components/Chart.astro';
		import { ChartColors, transparentize } from 'astro-charts/utils';
		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
		<head>
		<title>Example Chart</title>
		</head>
		<body>
		<div class="p-4 mx-auto max-w-screen-md">
		<Chart
		type="line"
		@@ -35,4 +37,4 @@ options={{
		data={{
		labels: ["1", "2", "3"],
		datasets: [
		labels: ["1", "2", "3"],
		datasets: [
		{
		@@ -52,12 +54,72 @@ label: "Sessions",
		},
		],
		],
		}}
		/>
		/>
		</div>
		</body>
		</body>
		</html>
		```

		### 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

		```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

		```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 } },
		},
		});
		}
		```

		## License

		MIT

dist/components/Chart.astro