Black bar on hover

[Fedex75]

Hi. I'm having an issue where after building the project the tooltips render a black bar instead of the gray, semitransparent bar I see in development. I'm using layerchart version "^2.0.0-next.27".

This is the chart:

<BarChart
	data={currentContractsChartData}
	x={['startDate', 'endDate']}
	xScale={scaleTime()}
	y="name"
	grid={{ x: false, y: true, bandAlign: 'between' }}
	orientation="horizontal"
	padding={{ left: 12, bottom: 36 }}
	props={{
		yAxis: { format: () => '' },
		xAxis: {
			format: (d: Date) => {
				return d.toLocaleDateString('es-AR', { month: 'short', year: '2-digit' });
			}
		},
		bars: { fill: 'var(--chart-1)' }
	}}
>
	{#snippet tooltip({ context })}
		<Tooltip.Root {context}>
			{#snippet children({ data })}
				<Tooltip.Header>{data.name}</Tooltip.Header>
				<Tooltip.List>
					<Tooltip.Item
						label="Inicio"
						value={data.startDate}
						format={(d) =>
							new Date(d).toLocaleDateString('es-ES', {
								month: 'long',
								year: 'numeric'
							})}
					/>
					<Tooltip.Item
						label="Fin"
						value={data.endDate}
						format={(d) =>
							new Date(d).toLocaleDateString('es-ES', {
								month: 'long',
								year: 'numeric'
							})}
					/>
					<Tooltip.Separator />
					<Tooltip.Item label="Duración" valueAlign="right">
						{data.contract.rentalOffer.expectedDurationAmount}
						{#if data.contract.rentalOffer.expectedDurationType === 'MONTHS'}
							{data.contract.rentalOffer.expectedDurationAmount === 1
								? 'mes'
								: 'meses'}
						{:else}
							{data.contract.rentalOffer.expectedDurationAmount === 1
								? 'día'
								: 'días'}
						{/if}
					</Tooltip.Item>
				</Tooltip.List>
			{/snippet}
		</Tooltip.Root>
	{/snippet}

	{#snippet aboveMarks({ context })}
		{#each currentContractsChartData as d (d.contract.id)}
			<Text
				value={d.contract.rentalOffer.property.name}
				x={context.xScale(d.startDate) + 2}
				y={context.yScale(d.name) + context.yScale.bandwidth!() / 2}
				textAnchor="start"
				verticalAnchor="middle"
				class="text-sm text-white"
			/>
		{/each}
	{/snippet}
</BarChart>

This is what it looks like in dev:

And this is what it looks like in production:

If it helps, the "black bar" is this component:
<rect x="0" y="5" width="1588" height="28" rx="0" ry="0" class="lc-rect lc-highlight-area"></rect>

Which has this CSS:

@layer base
:where(.lc-rect) {
  --fill-color: var(--color-surface-content, currentColor);
  --stroke-color: initial;
  }

If I disable the --fill-color it looks OK again, so maybe it's related to the --color-curface-content variable?

It's just very weird that it behaves differently after building. Any idea what could be happening? Thanks in advance.

[techniq]

Hey @Fedex75 👋

The easiest solution is to upgrade to at least 2.0.0-next.39 which removed the Tailwind requirement (but still has first-class Tailwind support).

If using Tailwind with other frameworks such as shadcn-svelte, skeleton, etc, you can also use a single .css import to integrate the CSS variables / theming, such as:

@import 'layerchart/shadcn-svelte.css';

The root cause of your issue with 2.0.0-next.27 is likely needing to add @source '../node_modules/layerchart/dist'; in app.css and make sure you have --color-surface-content: ... defined in your tailwind config, but I highly recommend using 2.0.0-next.39 which simplifies / removes these requirement.

For more details about the 2.0.0-next.39 release and general styling, take a look at:

• https://next.layerchart.com/docs/guides/styles#third-party-framework-colors
• https://bsky.app/profile/techniq.dev/post/3lzo26ual5227

If you do upgrade, I highly recommend going to the most recent next release which is 2.0.0-next.46 atm. There have been a lot of improvements since 2.0.0-next.27 on the way to the official 2.0.0 release

[Fedex75]

Ok so I have updated to 2.0.0-next.46 and added @import 'layerchart/shadcn-svelte.css'; to my app.css but I still see the issue.

I was doing some more debugging and I realized that both dev and prod have the same styles, the difference seems to be like the priority of the layers. So, in dev the components layer has a higher priority than base, so it looks ok but in prod the order is reversed. So it looks like my issue is not related to Layerchart, it's just some problem with the build output. If you have any clue, I would appreciate it because I tried adding: @layer theme, base, components, utilities; which was supposed to be the silver bullet to guarantee the layer order but it literally has no effect on the build output so I'm completely lost here.

But anyways, feel free to close the issue if you want because, again, it's unrelated. Thanks anyways.

[techniq]

hmm, very interesting 🤔

Let me know if you are able to find a solution as we can update the docs. Also, if you can share a reproduction, I can try taking a look as well, although I'm traveling today so it wouldn't be for at least a day or two.

[techniq]

@Fedex75 btw, have you tried different browsers (and on latest)?

I have seen some small issues with Safari and Firefox with regards to the docs, but doesn't appear to present in the examples themselves.

Chrome	Safari	Firefox

[Fedex75]

Here's a pretty minimal reproduction: https://github.com/Fedex75/layers-repro

Just run npm i and npm run dev. You should see the chart with the highlight working perfectly. But then if you run npm run build and npm run preview you should see that the highlight is now a black bar.

I tried in Safari and Chrome, both on MacOS 26, with the same result.

By latest do you mean layerchart 1.0.13? I did not try that, only 2.0.0. In this project I'm using Svelte 5 and Tailwind 4 so I think it was a requirement to upgrade to layerchart@next.