hipowered.dev/basecoat
1
0
Fork 0
mirror of https://github.com/hunvreus/basecoat.git synced 2026-11-14 14:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Prepare 1.0.0-beta.6

Browse Source
This commit is contained in:
Ronan Berder
2026-06-23 18:14:19 +08:00
parent fbf3f47b75
commit a17eaa20d3
63 changed files with 2398 additions and 1502 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/components/chart.mdx
+65 -9
View File
@@ -1,4 +1,6 @@
import chartExamplesUrl from "../site/chart-examples.js?url"
import basecoatRuntimeSource from "../../../src/js/basecoat.js?raw"
import chartRuntimeSource from "../../../src/js/chart.js?raw"
import chartExamplesSource from "../site/chart-examples.js?raw"
# Chart
@@ -12,19 +14,49 @@ Use Chart.js with Basecoat defaults for themed colors, external tooltips, and op
<canvas id="chart-example-overview" aria-label="Visitors by device"></canvas>
</Preview>
Chart is an optional JavaScript helper. Load Chart.js first, then `basecoat.js`, then `chart.js`.
## Usage
```html
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/basecoat.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/chart.min.js" defer></script>
<Steps>
<Step title="Include CSS">
Import Tailwind and one full Basecoat style bundle.
```css
@import "tailwindcss";
@import "basecoat-css/vega.css";
```
## Usage
Or import only the base CSS, Chart component CSS, and one style pack.
```css
@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/chart.css";
@import "basecoat-css/styles/vega.css";
```
Using CDN or bundler imports? See the [Installation page](/installation).
</Step>
<Step title="Include JavaScript">
Copy or serve Chart.js, the Basecoat runtime, and Chart script.
```html
<script src="/assets/js/chart.umd.min.js"></script>
<script src="/assets/js/basecoat.min.js" defer></script>
<script src="/assets/js/chart.min.js" defer></script>
```
Chart is not included in the full Basecoat JavaScript bundle.
Using CDN or bundler imports? See the [Installation page](/installation).
</Step>
<Step title="Add your chart HTML">
```html
<canvas id="visitors-chart" aria-label="Monthly visitors"></canvas>
<script>
document.addEventListener("DOMContentLoaded", () => {
window.basecoat.chart("#visitors-chart", {
@@ -47,6 +79,9 @@ Chart is an optional JavaScript helper. Load Chart.js first, then `basecoat.js`,
</script>
```
</Step>
</Steps>
`basecoat.chart()` targets the `<canvas>` directly and creates Basecoat's internal `.chart` container for Chart.js sizing. You do not need to add a wrapper or class in your HTML.
Charts default to `aspect-video`. Use a height, `min-h-*`, or `aspect-*` utility on a parent element when you need a different measuring box.
@@ -186,7 +221,28 @@ window.basecoat.chart("#custom-chart", {
</Preview>
<script is:inline src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>
<script type="module" src={chartExamplesUrl}></script>
<script is:inline>{`
(() => {
const initChartPage = () => {
if (!window.Chart) {
requestAnimationFrame(initChartPage)
return
}
if (!window.basecoat) {
${basecoatRuntimeSource}
}
if (!window.basecoat.chart) {
${chartRuntimeSource}
}
${chartExamplesSource}
}
initChartPage()
})()
`}</script>
## API