@carbon/charts-svelte 1.11.8 → 1.11.10

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.11.10](https://github.com/carbon-design-system/carbon-charts/compare/v1.11.9...v1.11.10) (2023-07-14)
+
+
+### Bug Fixes
+
+* **prettier:** downgrade for now ([#1621](https://github.com/carbon-design-system/carbon-charts/issues/1621)) ([22509a2](https://github.com/carbon-design-system/carbon-charts/commit/22509a29e15d5aff951db66607965b9e59f898df))
+
+
+
+
+
+## [1.11.9](https://github.com/carbon-design-system/carbon-charts/compare/v1.11.8...v1.11.9) (2023-07-13)
+
+**Note:** Version bump only for package @carbon/charts-svelte
+
+
+
+
+
 ## [1.11.8](https://github.com/carbon-design-system/carbon-charts/compare/v1.11.7...v1.11.8) (2023-07-07)
 
 

package/README.md

@@ -1,6 +1,6 @@
 # Carbon Charts Svelte
 
-Carbon Charts Svelte is a thin Svelte wrapper around the vanilla JavScript `@carbon/charts` component library. The charts are based on D3.js, a peer dependency. Documentation is provided below and in the Storybook demos.
+Carbon Charts Svelte is a thin Svelte wrapper around the vanilla JavaScript `@carbon/charts` component library. The charts are based on D3.js, a peer dependency. Documentation is provided below and in the Storybook demos.
 
 **[Storybook demos](https://carbon-design-system.github.io/carbon-charts/svelte)**
 
@@ -10,7 +10,7 @@ Carbon Charts Svelte is a thin Svelte wrapper around the vanilla JavScript `@car
 
 These Svelte wrappers were developed by Eric Liu.
 
-Please direct all questions regarding support, bug fixes, and feature requests to [@metonym](https://github.com/metonym).
+Please direct all questions regarding support, bug fixes and feature requests to [@metonym](https://github.com/metonym).
 
 ## Getting started
 
@@ -26,51 +26,22 @@ If you prefer [Yarn](https://yarnpkg.com/en/), use the following command instead
 yarn add -D @carbon/charts-svelte @carbon/styles d3 d3-cloud d3-sankey
 ```
 
-## Setup
-
-This is an overview of using Carbon Charts with common Svelte setups.
-
-- [SvelteKit](#sveltekit)
-- [Vite](#vite)
-
 ### SvelteKit
 
-[SvelteKit](https://github.com/sveltejs/kit) is the official framework for building apps that
-support client-side rendering (CSR) and server-side rendering (SSR). SvelteKit is powered by
-[Vite](https://github.com/vitest-dev/vitest).
+While this component library can be used with any build environments for Svelte, [SvelteKit](https://kit.svelte.dev) is the official framework for building Svelte apps supporting client-side and server-side rendering (SSR). SvelteKit is powered by
+[Vite](https://vitejs.dev).
 
-Modules `@carbon/charts` and `carbon-components` should not be externalized for SSR when building for production.
+The module `@carbon/charts` should not be externalized for SSR when building for production.
 
 ```js
-// vite.config.js
+// vite.config.mjs
 import { sveltekit } from '@sveltejs/kit/vite'
 
 /** @type {import('vite').UserConfig} */
 const config = {
 	plugins: [sveltekit()],
 	ssr: {
-		noExternal: process.env.NODE_ENV === 'production' ? ['@carbon/charts', 'carbon-components'] : []
-	}
-}
-
-export default config
-```
-
-### Vite
-
-You can also use Vite without SvelteKit. Instruct `vite` to optimize `@carbon/charts` in
-`vite.config.js`.
-
-```js
-// vite.config.js
-import { svelte } from '@sveltejs/vite-plugin-svelte'
-
-/** @type {import('vite').UserConfig} */
-const config = {
-	plugins: [svelte()],
-	optimizeDeps: {
-		include: ['@carbon/charts', 'carbon-components'],
-		exclude: ['@carbon/telemetry']
+		noExternal: process.env.NODE_ENV === 'production' ? ['@carbon/charts'] : []
 	}
 }
 
@@ -79,31 +50,11 @@ export default config
 
 #### Circular dependency warnings
 
-You may see circular dependency warnings for `d3` and `@carbon/charts` packages that can be safely ignored.
-
-Use the `onwarn` option to selectively ignore these warnings.
-
-```js
-// rollup.config.js
-export default {
-	onwarn: (warning, warn) => {
-		// omit circular dependency warnings emitted from
-		// "d3-*" packages and "@carbon/charts"
-		if (warning.code === 'CIRCULAR_DEPENDENCY') {
-			if (warning.ids.some((id) => /node_modules\/(d3-|@carbon\/charts)/.test(id))) {
-				return
-			}
-		}
-
-		// preserve all other warnings
-		warn(warning)
-	}
-}
-```
+You may see circular dependency warnings for `d3` packages. These can be safely ignored.
 
 ## Usage
 
-Styles must be imported from both `@carbon/charts-svelte` and `@carbon/styles`.
+Styles must be imported from both `@carbon/charts-svelte` and `@carbon/styles`. The latter is only required if you use the toolbar.
 
 ```js
 import '@carbon/styles/css/styles.css'
@@ -128,6 +79,7 @@ import '@carbon/charts-svelte/styles.css'
 		{ group: 'Misc', value: 16932 }
 	]}
 	options={{
+		theme: 'g90',
 		title: 'Simple bar (discrete)',
 		height: '400px',
 		axes: {
@@ -140,24 +92,7 @@ import '@carbon/charts-svelte/styles.css'
 ### Theming
 
 `@carbon/styles` uses
-[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for dynamic, client-side theming. Update the Carbon theme using the `theme` prop.
-
-Supported themes include:
-
-- `"white"`
-- `"g10"` (Gray 10)
-- `"g90"` (Gray 90)
-- `"g100"` (Gray 100)
-
-The default theme is `"white"`.
-
-```svelte
-<BarChartSimple
-  theme="g90"
-  data={/* ... */}
-  options={/* ... */}
-/>
-```
+[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for dynamic, client-side theming. Care should be exercised as the styles apply to the HTML body.
 
 ### Dispatched events
 
@@ -174,7 +109,8 @@ Each Svelte chart component dispatches the following events:
 ### Dynamic import
 
 Dynamically import a chart and instantiate it using the
-[svelte:component API](https://svelte.dev/docs#svelte_component).
+[svelte:component API](https://svelte.dev/docs/special-elements#svelte-component). By importing `@carbon/charts` within `onMount()`, you avoid problems with
+server-side rendering.
 
 ```svelte
 <script>
@@ -200,6 +136,7 @@ Dynamically import a chart and instantiate it using the
 		{ group: 'Misc', value: 16932 }
 	]}
 	options={{
+		theme: 'white',
 		title: 'Simple bar (discrete)',
 		height: '400px',
 		axes: {
@@ -217,7 +154,7 @@ In this example, an event listener is attached to the `BarChartSimple` component
 <script>
 	import '@carbon/styles/css/styles.css'
 	import '@carbon/charts-svelte/styles.css'
-	import { onMount } from 'svelte'
+	import { onDestroy, onMount } from 'svelte'
 	import { BarChartSimple } from '@carbon/charts-svelte'
 
 	let chart
@@ -227,8 +164,12 @@ In this example, an event listener is attached to the `BarChartSimple` component
 	}
 
 	onMount(() => {
-		return () => {
-			if (chart) chart.services.events.removeEventListener('bar-mouseover', barMouseOver)
+		// do something
+	})
+
+	onDestroy(() => {
+		if (chart) {
+			chart.services.events.removeEventListener('bar-mouseover', barMouseOver)
 		}
 	})
 
@@ -254,26 +195,23 @@ In this example, an event listener is attached to the `BarChartSimple` component
 	}} />
 ```
 
-## CodeSandbox examples
+## StackBlitz examples
 
 [Sample use cases can be seen here](https://carbon-design-system.github.io/carbon-charts/svelte).
 
-**When opening the link above**, click on the **Edit on Codesandbox** button for each demo to see an isolated project showing you how to reproduce the demo.
+**When opening the link above**, click on the **Edit on StackBlitz** button for each demo to see an isolated project showing you how to reproduce the demo.
 
 ## Charting data & options
 
-Although we will definitely introduce new models in the future as we start shipping new components such as maps, Data and options follow the same model in all charts, with minor exceptions and differences in specific components.
-
-For instance, in the case of a donut chart, you're able to pass in an additional field called `center` in your options configuring the donut center.
+Although new charts will be introduced in the future (such as a choropleth), data and options follow the same model for all charts with minor exceptions. For example, in the case of a donut chart, you're able to pass in an additional field called `center` in your options to configure the donut center.
 
-For instructions on using the **tabular data format**, see
-[here](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-tutorials--tabular-data-format)
+[Instructions for using the **tabular data format**](https://charts.carbondesignsystem.com/svelte/?path=/docs/docs-tutorials-tabular-data-format--docs)
 
-There are additional options available depending on the chart type being used, [see our demo examples here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data).
+Additional options are available depending on the chart type being used, [see our demo examples here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/src/demo/charts).
 
 Customizable options (specific to chart type) can be found
-[here](https://carbon-design-system.github.io/carbon-charts/documentation/modules/_interfaces_charts_.html)
+[here](https://charts.carbondesignsystem.com/documentation/modules/interfaces.html)
 
 ## TypeScript support
 
-Svelte version 3.31 or greater is required to use this library with TypeScript.
+Svelte version 3.31 or greater is required to use this library with TypeScript. Svelte 4.x+ is recommended.

package/dist/AlluvialChart.svelte

@@ -2,10 +2,10 @@
   AlluvialChart as AlluvialChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/AlluvialChart.svelte.d.ts

@@ -3,10 +3,10 @@ import { AlluvialChart as AlluvialChartCore, type AlluvialChartOptions, type Cha
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: AlluvialChartCore;
         options: AlluvialChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: AlluvialChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/dist/AreaChart.svelte

@@ -2,10 +2,10 @@
   AreaChart as AreaChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/AreaChart.svelte.d.ts

@@ -3,10 +3,10 @@ import { AreaChart as AreaChartCore, type AreaChartOptions, type ChartTabularDat
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: AreaChartCore;
         options: AreaChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: AreaChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/dist/BarChartGrouped.svelte

@@ -2,10 +2,10 @@
   GroupedBarChart as GroupedBarChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/BarChartGrouped.svelte.d.ts

@@ -3,10 +3,10 @@ import { GroupedBarChart as GroupedBarChartCore, type BarChartOptions, type Char
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: GroupedBarChartCore;
         options: BarChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: GroupedBarChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/dist/BarChartSimple.svelte

@@ -2,10 +2,10 @@
   SimpleBarChart as SimpleBarChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/BarChartSimple.svelte.d.ts

@@ -3,10 +3,10 @@ import { SimpleBarChart as SimpleBarChartCore, type BarChartOptions, type ChartT
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: SimpleBarChartCore;
         options: BarChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: SimpleBarChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/dist/BarChartStacked.svelte

@@ -2,10 +2,10 @@
   StackedBarChart as StackedBarChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/BarChartStacked.svelte.d.ts

@@ -3,10 +3,10 @@ import { StackedBarChart as StackedBarChartCore, type BarChartOptions, type Char
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: StackedBarChartCore;
         options: BarChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: StackedBarChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/dist/BoxplotChart.svelte

@@ -2,10 +2,10 @@
   BoxplotChart as BoxplotChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/BoxplotChart.svelte.d.ts

@@ -3,10 +3,10 @@ import { BoxplotChart as BoxplotChartCore, type BoxplotChartOptions, type ChartT
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: BoxplotChartCore;
         options: BoxplotChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: BoxplotChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/dist/BubbleChart.svelte

@@ -2,10 +2,10 @@
   BubbleChart as BubbleChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/BubbleChart.svelte.d.ts

@@ -3,10 +3,10 @@ import { BubbleChart as BubbleChartCore, type BubbleChartOptions, type ChartTabu
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: BubbleChartCore;
         options: BubbleChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: BubbleChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/dist/BulletChart.svelte

@@ -2,10 +2,10 @@
   BulletChart as BulletChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/BulletChart.svelte.d.ts

@@ -3,10 +3,10 @@ import { BulletChart as BulletChartCore, type BulletChartOptions, type ChartTabu
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: BulletChartCore;
         options: BulletChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: BulletChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/dist/ChoroplethChart.svelte

@@ -2,10 +2,10 @@
   ExperimentalChoroplethChart as ChoroplethChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/ChoroplethChart.svelte.d.ts

@@ -3,10 +3,10 @@ import { ExperimentalChoroplethChart as ChoroplethChartCore, type ChoroplethChar
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: ChoroplethChartCore;
         options: ChoroplethChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: ChoroplethChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/dist/CirclePackChart.svelte

@@ -2,10 +2,10 @@
   CirclePackChart as CirclePackChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/CirclePackChart.svelte.d.ts

@@ -3,10 +3,10 @@ import { CirclePackChart as CirclePackChartCore, type CirclePackChartOptions, ty
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: CirclePackChartCore;
         options: CirclePackChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: CirclePackChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/dist/ComboChart.svelte

@@ -2,10 +2,10 @@
   ComboChart as ComboChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/ComboChart.svelte.d.ts

@@ -3,10 +3,10 @@ import { ComboChart as ComboChartCore, type ComboChartOptions, type ChartTabular
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: ComboChartCore;
         options: ComboChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: ComboChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/dist/DonutChart.svelte

@@ -2,10 +2,10 @@
   DonutChart as DonutChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/DonutChart.svelte.d.ts

@@ -3,10 +3,10 @@ import { DonutChart as DonutChartCore, type DonutChartOptions, type ChartTabular
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: DonutChartCore;
         options: DonutChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: DonutChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/dist/GaugeChart.svelte

@@ -2,10 +2,10 @@
   GaugeChart as GaugeChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/GaugeChart.svelte.d.ts

@@ -3,10 +3,10 @@ import { GaugeChart as GaugeChartCore, type GaugeChartOptions, type ChartTabular
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: GaugeChartCore;
         options: GaugeChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: GaugeChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/dist/HeatmapChart.svelte

@@ -2,10 +2,10 @@
   HeatmapChart as HeatmapChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/HeatmapChart.svelte.d.ts

@@ -3,10 +3,10 @@ import { HeatmapChart as HeatmapChartCore, type HeatmapChartOptions, type ChartT
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: HeatmapChartCore;
         options: HeatmapChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: HeatmapChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/dist/HistogramChart.svelte

@@ -2,10 +2,10 @@
   HistogramChart as HistogramChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/HistogramChart.svelte.d.ts

@@ -3,10 +3,10 @@ import { HistogramChart as HistogramChartCore, type HistogramChartOptions, type
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: HistogramChartCore;
         options: HistogramChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: HistogramChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/dist/LineChart.svelte

@@ -2,10 +2,10 @@
   LineChart as LineChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/LineChart.svelte.d.ts

@@ -3,10 +3,10 @@ import { LineChart as LineChartCore, type LineChartOptions, type ChartTabularDat
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: LineChartCore;
         options: LineChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: LineChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/dist/LollipopChart.svelte

@@ -2,10 +2,10 @@
   LollipopChart as LollipopChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/LollipopChart.svelte.d.ts

@@ -3,10 +3,10 @@ import { LollipopChart as LollipopChartCore, type LollipopChartOptions, type Cha
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: LollipopChartCore;
         options: LollipopChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: LollipopChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/dist/MeterChart.svelte

@@ -2,10 +2,10 @@
   MeterChart as MeterChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/MeterChart.svelte.d.ts

@@ -3,10 +3,10 @@ import { MeterChart as MeterChartCore, type MeterChartOptions, type ChartTabular
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: MeterChartCore;
         options: MeterChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: MeterChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/dist/PieChart.svelte

@@ -2,10 +2,10 @@
   PieChart as PieChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/PieChart.svelte.d.ts

@@ -3,10 +3,10 @@ import { PieChart as PieChartCore, type PieChartOptions, type ChartTabularData }
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: PieChartCore;
         options: PieChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: PieChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/dist/RadarChart.svelte

@@ -2,10 +2,10 @@
   RadarChart as RadarChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/RadarChart.svelte.d.ts

@@ -3,10 +3,10 @@ import { RadarChart as RadarChartCore, type RadarChartOptions, type ChartTabular
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: RadarChartCore;
         options: RadarChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: RadarChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/dist/ScatterChart.svelte

@@ -2,10 +2,10 @@
   ScatterChart as ScatterChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/ScatterChart.svelte.d.ts

@@ -3,10 +3,10 @@ import { ScatterChart as ScatterChartCore, type ScatterChartOptions, type ChartT
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: ScatterChartCore;
         options: ScatterChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: ScatterChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/dist/StackedAreaChart.svelte

@@ -2,10 +2,10 @@
   StackedAreaChart as StackedAreaChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/StackedAreaChart.svelte.d.ts

@@ -3,10 +3,10 @@ import { StackedAreaChart as StackedAreaChartCore, type StackedAreaChartOptions,
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: StackedAreaChartCore;
         options: StackedAreaChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: StackedAreaChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/dist/TreeChart.svelte

@@ -2,10 +2,10 @@
   TreeChart as TreeChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/TreeChart.svelte.d.ts

@@ -3,10 +3,10 @@ import { TreeChart as TreeChartCore, type TreeChartOptions, type ChartTabularDat
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: TreeChartCore;
         options: TreeChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: TreeChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/dist/TreemapChart.svelte

@@ -2,10 +2,10 @@
   TreemapChart as TreemapChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/TreemapChart.svelte.d.ts

@@ -3,10 +3,10 @@ import { TreemapChart as TreemapChartCore, type TreemapChartOptions, type ChartT
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: TreemapChartCore;
         options: TreemapChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: TreemapChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/dist/WordCloudChart.svelte

@@ -2,10 +2,10 @@
   WordCloudChart as WordCloudChartCore
 } from "@carbon/charts";
 import BaseChart from "./BaseChart.svelte";
-export let chart;
 export let options;
 export let data;
-export let ref;
+export let chart = null;
+export let ref = null;
 </script>
 
 <BaseChart

package/dist/WordCloudChart.svelte.d.ts

@@ -3,10 +3,10 @@ import { WordCloudChart as WordCloudChartCore, type WorldCloudChartOptions, type
 declare const __propDef: {
     props: {
         [x: string]: any;
-        chart: WordCloudChartCore;
         options: WorldCloudChartOptions;
         data: ChartTabularData;
-        ref: HTMLDivElement;
+        chart?: WordCloudChartCore | null;
+        ref?: HTMLDivElement | null;
     };
     events: {
         load: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/charts-svelte",
-  "version": "1.11.8",
+  "version": "1.11.10",
   "description": "Carbon Charts component library for Svelte",
   "scripts": {
     "postinstall": "carbon-telemetry collect --install",
@@ -40,24 +40,26 @@
   "peerDependencies": {
     "svelte": "^3.31.0 || ^4.0.0"
   },
+  "dependencies": {
+    "@carbon/charts": "1.11.10",
+    "@carbon/telemetry": "~0.1.0"
+  },
   "devDependencies": {
-    "@carbon/charts": "1.11.8",
-    "@carbon/telemetry": "~0.1.0",
     "@stackblitz/sdk": "^1.9.0",
-    "@storybook/addon-essentials": "^7.0.26",
-    "@storybook/addon-interactions": "^7.0.26",
-    "@storybook/addon-links": "^7.0.26",
-    "@storybook/blocks": "^7.0.26",
-    "@storybook/manager-api": "^7.0.26",
-    "@storybook/svelte": "^7.0.26",
-    "@storybook/sveltekit": "^7.0.26",
+    "@storybook/addon-essentials": "^7.0.27",
+    "@storybook/addon-interactions": "^7.0.27",
+    "@storybook/addon-links": "^7.0.27",
+    "@storybook/blocks": "^7.0.27",
+    "@storybook/manager-api": "^7.0.27",
+    "@storybook/svelte": "^7.0.27",
+    "@storybook/sveltekit": "^7.0.27",
     "@storybook/testing-library": "^0.2.0",
-    "@storybook/theming": "^7.0.26",
+    "@storybook/theming": "^7.0.27",
     "@sveltejs/adapter-auto": "^2.1.0",
-    "@sveltejs/kit": "^1.22.1",
-    "@sveltejs/package": "^2.1.0",
-    "@typescript-eslint/eslint-plugin": "^5.61.0",
-    "@typescript-eslint/parser": "^5.61.0",
+    "@sveltejs/kit": "^1.22.3",
+    "@sveltejs/package": "^2.2.0",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
     "concurrently": "^8.2.0",
     "d3": "^7.8.5",
     "d3-cloud": "^1.2.5",
@@ -70,12 +72,12 @@
     "publint": "^0.1.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.0.26",
+    "storybook": "^7.0.27",
     "svelte": "^4.0.5",
-    "svelte-check": "^3.4.5",
+    "svelte-check": "^3.4.6",
     "tslib": "^2.6.0",
     "typescript": "^5.1.6",
-    "vite": "^4.4.2"
+    "vite": "^4.4.3"
   },
   "publishConfig": {
     "access": "public"
@@ -126,5 +128,5 @@
     "sass",
     "scss"
   ],
-  "gitHead": "be6ab18afdcf69f77f50ca28e51d62126e197cca"
+  "gitHead": "4f4eaf872bd512a44cd154a105e7380301f8e246"
 }