{"_id":"@chartlite/svelte","_rev":"5-0f408120a76ab5c52251d1a49a0d75c0","name":"@chartlite/svelte","dist-tags":{"latest":"1.1.0"},"versions":{"0.12.0":{"name":"@chartlite/svelte","version":"0.12.0","keywords":["charts","svelte","visualization","chartlite"],"author":{"name":"Riel St. Amand"},"license":"MIT","_id":"@chartlite/svelte@0.12.0","maintainers":[{"name":"riel-st-amand","email":"riel.stamand@gmail.com"}],"homepage":"https://github.com/chartlite/chartlite#readme","bugs":{"url":"https://github.com/chartlite/chartlite/issues"},"dist":{"shasum":"f20829be3d049248a547589c75e3f1acd5ddf889","tarball":"https://registry.npmjs.org/@chartlite/svelte/-/svelte-0.12.0.tgz","fileCount":6,"integrity":"sha512-Ny6beLg7ARPqdDTdWTalJhi2bmUhQPICSAI0u+RcsD2zJn9nOIMGJ8o9lVHM2UkWdOCu1f2HwibN2cw1XQJUZA==","signatures":[{"sig":"MEUCIQCPjegHzI6IrLK5b0FYrd/O7G8f+afy/xMZ/leVSZ2sTgIgflJ+PfXzpH1ARWUEZxmapiX9za0i1EWWFOyC3INgZcQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12539},"main":"./dist/index.js","type":"module","_from":"file:chartlite-svelte-0.12.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","test":"vitest run --passWithNoTests","build":"tsup","clean":"rm -rf dist","test:watch":"vitest"},"_npmUser":{"name":"riel-st-amand","email":"riel.stamand@gmail.com"},"_resolved":"C:\\Users\\RIELST~1\\AppData\\Local\\Temp\\0f43aaf56bbcd17c73b0f91c9b03f2f0\\chartlite-svelte-0.12.0.tgz","_integrity":"sha512-Ny6beLg7ARPqdDTdWTalJhi2bmUhQPICSAI0u+RcsD2zJn9nOIMGJ8o9lVHM2UkWdOCu1f2HwibN2cw1XQJUZA==","repository":{"url":"git+https://github.com/chartlite/chartlite.git","type":"git","directory":"packages/svelte"},"_npmVersion":"11.12.1","description":"Svelte wrapper for Chartlite — beautiful, lightweight charts","directories":{},"_nodeVersion":"24.5.0","dependencies":{"@chartlite/core":"0.12.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","jsdom":"^25.0.0","vitest":"^2.0.0","typescript":"^5.5.0"},"peerDependencies":{"svelte":"^4.0.0 || ^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svelte_0.12.0_1782972384110_0.21520283092109715","host":"s3://npm-registry-packages-npm-production"}},"0.12.1":{"name":"@chartlite/svelte","version":"0.12.1","keywords":["charts","svelte","visualization","chartlite"],"author":{"name":"Riel St. Amand"},"license":"MIT","_id":"@chartlite/svelte@0.12.1","maintainers":[{"name":"riel-st-amand","email":"riel.stamand@gmail.com"}],"homepage":"https://github.com/chartlite/chartlite#readme","bugs":{"url":"https://github.com/chartlite/chartlite/issues"},"dist":{"shasum":"ea56f4d1daf1b7ae2a4e9ea5120f951b6a5ddb93","tarball":"https://registry.npmjs.org/@chartlite/svelte/-/svelte-0.12.1.tgz","fileCount":6,"integrity":"sha512-xfldb+XcBYKp8AA16rLU++n22jggppYE5V1QlSPSi2XHNMRUl5jhkEDqwFOR86hzafVOeBVV0DYER0y7EM3mpA==","signatures":[{"sig":"MEYCIQDgSW6RyIofUemQ+urvHzDOaLDHA/WMHILUwt/j6C2JJgIhALO9pxcr8T/Tq5P//7ZmtAZcPkNd24hE55rgrZ+m4YLH","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@chartlite%2fsvelte@0.12.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":12211},"main":"./dist/index.js","type":"module","_from":"file:chartlite-svelte-0.12.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","test":"vitest run --passWithNoTests","build":"tsup","clean":"rm -rf dist","test:watch":"vitest"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:d44a6de2-c005-4234-9996-4206d4e8afb1"}},"_resolved":"/tmp/add8f56ffd8575d35a7c81888df4cb97/chartlite-svelte-0.12.1.tgz","_integrity":"sha512-xfldb+XcBYKp8AA16rLU++n22jggppYE5V1QlSPSi2XHNMRUl5jhkEDqwFOR86hzafVOeBVV0DYER0y7EM3mpA==","repository":{"url":"git+https://github.com/chartlite/chartlite.git","type":"git","directory":"packages/svelte"},"_npmVersion":"11.18.0","description":"Svelte wrapper for Chartlite — beautiful, lightweight charts","directories":{},"_nodeVersion":"20.20.2","dependencies":{"@chartlite/core":"0.12.1"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","jsdom":"^25.0.0","vitest":"^2.0.0","typescript":"^5.5.0"},"peerDependencies":{"svelte":"^4.0.0 || ^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svelte_0.12.1_1782978985055_0.5344902665342159","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@chartlite/svelte","version":"1.0.0","keywords":["charts","svelte","visualization","chartlite"],"author":{"name":"Riel St. Amand"},"license":"MIT","_id":"@chartlite/svelte@1.0.0","maintainers":[{"name":"riel-st-amand","email":"riel.stamand@gmail.com"}],"homepage":"https://github.com/chartlite/chartlite#readme","bugs":{"url":"https://github.com/chartlite/chartlite/issues"},"dist":{"shasum":"7e8a67ea76c30143e98dac6e9084f0f77a04d348","tarball":"https://registry.npmjs.org/@chartlite/svelte/-/svelte-1.0.0.tgz","fileCount":6,"integrity":"sha512-jChNaFy7ZWWUOk8x9oqehJYGd5isIPjblnAhmwEVGwRuG+sfHh2Z0Jx+pe/YrklA5XEI9RmL8/GHsyEm+mnw6g==","signatures":[{"sig":"MEUCIQCbhCKUlVf7eQXg8E3MpqaC/I5zGTTY7dTvK46XkqvezgIgT3fviW7pcrP5MpPNHbdxDk+lddIMaKuOMOeHELdHKRE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@chartlite%2fsvelte@1.0.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":12222},"main":"./dist/index.js","type":"module","_from":"file:chartlite-svelte-1.0.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","test":"vitest run --passWithNoTests","build":"tsup","clean":"rm -rf dist","test:watch":"vitest"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:d44a6de2-c005-4234-9996-4206d4e8afb1"}},"_resolved":"/tmp/9b86c72b713e496a50685dee34fbbf9e/chartlite-svelte-1.0.0.tgz","_integrity":"sha512-jChNaFy7ZWWUOk8x9oqehJYGd5isIPjblnAhmwEVGwRuG+sfHh2Z0Jx+pe/YrklA5XEI9RmL8/GHsyEm+mnw6g==","repository":{"url":"git+https://github.com/chartlite/chartlite.git","type":"git","directory":"packages/svelte"},"_npmVersion":"11.18.0","description":"Svelte wrapper for Chartlite — beautiful, lightweight charts","directories":{},"_nodeVersion":"20.20.2","dependencies":{"@chartlite/core":"1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","jsdom":"^25.0.0","vitest":"^2.0.0","typescript":"^5.5.0"},"peerDependencies":{"svelte":"^4.0.0 || ^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svelte_1.0.0_1782980868745_0.19385045432944326","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@chartlite/svelte","version":"1.0.1","keywords":["charts","svelte","visualization","chartlite"],"author":{"name":"Riel St. Amand"},"license":"MIT","_id":"@chartlite/svelte@1.0.1","maintainers":[{"name":"riel-st-amand","email":"riel.stamand@gmail.com"}],"homepage":"https://github.com/chartlite/chartlite#readme","bugs":{"url":"https://github.com/chartlite/chartlite/issues"},"dist":{"shasum":"8ab60830c98d2c5e41e34621be600c0ee10e973c","tarball":"https://registry.npmjs.org/@chartlite/svelte/-/svelte-1.0.1.tgz","fileCount":5,"integrity":"sha512-tQMc61KJ/eLlKgjF1GLynGy2uTr/zj2qRk0zOT9esd3PfXR+xPI5aa/P67jqkc9KFhKoJsoVBEiUh1yG10LutA==","signatures":[{"sig":"MEUCIFEXFGML/ZYEcPosZuaw28q5oQod4nqZafgkLoIp8Z+pAiEA2gl8/10mv7sq7pxoecXnBqItlYd+DjGy23Yte3rC0PU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@chartlite%2fsvelte@1.0.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":7207},"main":"./dist/index.js","type":"module","_from":"file:chartlite-svelte-1.0.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","test":"vitest run --passWithNoTests","build":"tsup","clean":"node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\"","test:watch":"vitest"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:d44a6de2-c005-4234-9996-4206d4e8afb1"}},"_resolved":"/tmp/13bda2accc41ab9fa93332d668bfa46a/chartlite-svelte-1.0.1.tgz","_integrity":"sha512-tQMc61KJ/eLlKgjF1GLynGy2uTr/zj2qRk0zOT9esd3PfXR+xPI5aa/P67jqkc9KFhKoJsoVBEiUh1yG10LutA==","repository":{"url":"git+https://github.com/chartlite/chartlite.git","type":"git","directory":"packages/svelte"},"_npmVersion":"11.6.2","description":"Svelte wrapper for Chartlite — beautiful, lightweight charts","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","dependencies":{"@chartlite/core":"1.0.1"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","jsdom":"^25.0.0","vitest":"^4.1.10","typescript":"^5.5.0"},"peerDependencies":{"svelte":"^4.0.0 || ^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svelte_1.0.1_1786564847311_0.24301862522840634","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"_id":"@chartlite/svelte@1.1.0","bugs":{"url":"https://github.com/chartlite/chartlite/issues"},"dist":{"shasum":"3d0135bd0d45c1d9e11cafbce84aeaab95f75261","tarball":"https://registry.npmjs.org/@chartlite/svelte/-/svelte-1.1.0.tgz","fileCount":5,"integrity":"sha512-4GOl6XJuiQZKC86P4DvRIde1zRmqCgZu+UDUPurblSxAxU/iiQAItN7uWuMaeiC6XEQFhOSxnqOJ0CquFsVutQ==","signatures":[{"sig":"MEUCIQDp7enzn/Iv2mMO1VooceWoOQFqB1yCITza8pvL6T6x6AIgdxsCM79gO8niA2kJhj5J0VXK9cxEAT/8FVJ30n1uZ3M=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDn1sP4/5ZFGpO06GOtJxd0rA5hahdB0rEx7vlVX2266AiB8wi1HiKGT90BESQ5bKZ7cNVpZVQYfRQOUr6eaJZgxNQ=="}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@chartlite%2fsvelte@1.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":15464},"main":"./dist/index.js","name":"@chartlite/svelte","type":"module","_from":"file:chartlite-svelte-1.1.0.tgz","types":"./dist/index.d.ts","author":{"name":"Riel St. Amand"},"module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"license":"MIT","scripts":{"dev":"tsup --watch","lint":"tsc --noEmit && tsc -p tsconfig.test.json","test":"vitest run --passWithNoTests","build":"tsup","clean":"node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\"","test:watch":"vitest"},"version":"1.1.0","_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:d44a6de2-c005-4234-9996-4206d4e8afb1"}},"homepage":"https://github.com/chartlite/chartlite#readme","keywords":["charts","svelte","visualization","chartlite"],"_resolved":"/tmp/e50a724afcc0d5e18f01903df0e80b0a/chartlite-svelte-1.1.0.tgz","_integrity":"sha512-4GOl6XJuiQZKC86P4DvRIde1zRmqCgZu+UDUPurblSxAxU/iiQAItN7uWuMaeiC6XEQFhOSxnqOJ0CquFsVutQ==","repository":{"url":"git+https://github.com/chartlite/chartlite.git","type":"git","directory":"packages/svelte"},"_npmVersion":"11.6.2","description":"Svelte wrapper for Chartlite — beautiful, lightweight charts","directories":{},"maintainers":[{"name":"riel-st-amand","email":"riel.stamand@gmail.com"}],"sideEffects":false,"_nodeVersion":"20.20.2","dependencies":{"@chartlite/core":"^1.1.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","jsdom":"^25.0.0","vitest":"^4.1.10","typescript":"^5.5.0"},"peerDependencies":{"svelte":"^4.0.0 || ^5.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/svelte_1.1.0_1790370533390_0.14241375336169648"}}},"time":{"created":"2026-07-02T06:06:23.935Z","modified":"2026-09-25T21:08:53.782Z","0.12.0":"2026-07-02T06:06:24.240Z","0.12.1":"2026-07-02T07:56:25.222Z","1.0.0":"2026-07-02T08:27:48.901Z","1.0.1":"2026-08-12T20:00:47.467Z","1.1.0":"2026-09-25T21:08:53.452Z"},"bugs":{"url":"https://github.com/chartlite/chartlite/issues"},"author":{"name":"Riel St. Amand"},"license":"MIT","homepage":"https://github.com/chartlite/chartlite#readme","keywords":["charts","svelte","visualization","chartlite"],"repository":{"url":"git+https://github.com/chartlite/chartlite.git","type":"git","directory":"packages/svelte"},"description":"Svelte wrapper for Chartlite — beautiful, lightweight charts","maintainers":[{"name":"riel-st-amand","email":"riel.stamand@gmail.com"}],"readme":"# @chartlite/svelte\n\n**A Svelte action for Chartlite — beautiful, lightweight charts.**\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\nThin Svelte wrapper over [`@chartlite/core`](https://www.npmjs.com/package/@chartlite/core) — a ~15KB-gzip, zero-dependency SVG charting library. Shipped as a Svelte **action** and supports Svelte 4 and 5.\n\n## Installation\n\n```bash\npnpm add @chartlite/svelte @chartlite/core svelte\n```\n\n## Usage\n\nAttach the `chart` action to any element and pass a spec — the Svelte mirror of the core's `renderToString(spec)`:\n\n```svelte\n<script>\n  import { chart } from '@chartlite/svelte';\n\n  let data = [\n    { x: 'Jan', y: 4200 },\n    { x: 'Feb', y: 4800 },\n    { x: 'Mar', y: 5200 },\n  ];\n</script>\n\n<div use:chart={{ type: 'line', data, curve: 'smooth', theme: 'tailwind' }} style=\"height: 360px\" />\n```\n\nAll eight chart types work: `line`, `bar`, `area`, `scatter`, `pie`/donut, `radial`/gauge, `combo` (bars + trend line), and `sparkline`. The parameters are typed as a discriminated union on `type` (`ChartParams`), so each `type` only accepts its own chart's options — `{ type: 'line', curv: 'smooth' }` is a type error.\n\n### Updates\n\nWhen the parameters change (Svelte calls the action's `update`), the action diffs them:\n\n- **Only `data` changed** → the chart updates in place with `chart.update(data)`. Data is compared by value, so an equal-but-new array is a no-op.\n- **Callbacks changed** (`onPointClick`, `onHover`, `onLegendToggle`, `onError`, `valueFormatter`, `tooltip.formatter`) → nothing re-renders; the chart calls them through stable proxies that always invoke the latest function, so inline arrow functions are fine. (A `valueFormatter` whose source changes re-renders so axis labels update.)\n- **Any other option changed** → the chart is recreated.\n\nThe chart is **destroyed** when the element unmounts. If you call the action yourself, its return value also exposes the live core instance as `chart` (or `null` after an error).\n\n### Tooltips and interactivity\n\n`tooltip: true` (or a [`TooltipOptions`](https://github.com/chartlite/chartlite/blob/main/packages/core/src/interactive/tooltip.ts) object) adds a hover tooltip. Event callbacks install the plugins they need automatically (unless a plugin with that name is already in `plugins`): `onPointClick` / `onHover` add `callbacks()`, `onLegendToggle` adds `legendToggle()`.\n\n```svelte\n<div use:chart={{\n  type: 'line',\n  data,\n  tooltip: true,\n  onPointClick: (p) => goto(`/months/${p.x}`),\n}} />\n```\n\nOther plugins (e.g. `crosshair()`) go in `plugins`; they're compared by `name`, so an inline `plugins: [crosshair()]` doesn't recreate the chart on every update.\n\n### Combo chart\n\n```svelte\n<div use:chart={{\n  type: 'combo',\n  data: {\n    series: [\n      { name: 'Revenue', dataKey: 'revenue', type: 'bar' },\n      { name: 'Growth',  dataKey: 'growth',  type: 'line' },\n    ],\n    data: [\n      { month: 'Jan', revenue: 4200, growth: 12 },\n      { month: 'Feb', revenue: 4800, growth: 18 },\n    ],\n  },\n}} />\n```\n\n### Errors\n\nPass `onError` to catch render errors. A fallback box is shown in the host element either way, and the chart recovers as soon as valid parameters arrive:\n\n```svelte\n<div use:chart={{ type: 'line', data, onError: (e) => console.warn(e) }} />\n```\n\n## Themes (incl. zero-JS dark mode)\n\nSix built-in themes (`default`, `midnight`, `minimal`, `tailwind`, `nord`, `high-contrast`). Or pass `cssVars: true` and re-theme with plain CSS:\n\n```svelte\n<div class=\"chart\" use:chart={{ type: 'line', data, cssVars: true }} />\n\n<style>\n  @media (prefers-color-scheme: dark) {\n    .chart { --cl-text: #94a3b8; --cl-grid: #1e293b; --cl-series-0: #818cf8; }\n  }\n</style>\n```\n\n## License\n\nMIT © [Riel St. Amand](https://github.com/chartlite)\n","readmeFilename":"README.md"}