SvelteKit - AreaSeries props not honored

[PlkMarudny]

Under SvelteKit, with 'lightweight-charts' excluded from SSR, like below:

const config = {
	kit: {
		adapter: adapter(),
		vite: {
			ssr: {
				noExternal: ['lightweight-charts']
			}
		}
	}
};

using:

<Chart height={280} width={220} {...theme.chart} ref={(ref) => (chartApi = ref)}>
	<AreaSeries
		{data}
		topColor="rgba(102, 102, 102, 0.56)"
		bottomColor="rgba(102, 102, 102, 0.04)"
		lineColor="rgba(171, 71, 188, 1)"
		lineWidth={2}
	/>
</Chart>

has no effects, i.e. custom colors are not applied.

[trash-and-fire]

Hi, do you have any errors in the node console or in the browser console?

Have you tried to import module with svelte-lightweight-chart dynamically?

{#await import('path to your chart component') then { default: ChartComponent } }
<ChartComponent/>
{/await}

I know that lightweight-charts (base package) does not support SSR. It fails even on simple import into node environment. This bug will be fixed in 4.0. I know some workarounds via webpack. I can try to find something for SvelteKit.

[PlkMarudny]

Well, no I did not load the component dynamically, as I try to use ResizeObserver to scale chart responsively. But everything seems to work but the props mentioned.

[PlkMarudny]

And no, no errors on the console. In general SSR is not involved (I hope so, config excludes that). Technically, this is the only issue I found with such a setup.

[trash-and-fire]

I tried to reproduce the problem, but everything is fine in my environment. I tried with adapter-node and adapter-auto.

There may be something wrong with other code. I'm guessing the issue might be with resize-observer or theme.chart. Could you please give a minimal reproduction or a bit more code for the chart in your project.

[PlkMarudny]

It turned out indeed using ResizeObserver (or rather calling chartApi.addAreaSeries(); was the problem. The solution is to call

chartApi.addAreaSeries((theme.series)

instead. Apologies for the false alarm.