Can't get rid of padding/margin on VisCrosshair when using template #403

AshtonHannon · 2024-05-15T19:43:36Z

AshtonHannon
May 15, 2024

Hello all. I am using the Svelte version of Unovis (@unovis/ts & @unovis/svelte), and I am using a VisScatter and VisCrosshair. I have created a simple template for the VisCrosshair, however it seems to have some padding/margin that I can not get rid of for the life of me. I want to get rid of it so that I can style the template custom, but I cannot figure out how to do so.

The plot inside of VisXYContainer:

<VisXYContainer {data} height={200} margin={{ top: 5, right: 10, left: 10, bottom: 0 }}>
	<VisTooltip />
	<VisAxis type="x" position="bottom" label={xLabel} tickFormat={(x) => `${new Date(x).getMonth() + 1}/${new Date(x).getDate()}`} />
	<VisAxis type="y" position="left" label={yLabel} />
	<VisLine {x} {y} lineWidth={1} color={lineColors} />
	<VisScatter {x} {y} color={scatterPointColors} size={6} strokeColor={scatterPointStrokeColors} strokeWidth={crosshairStrokeWidths} />
	<VisCrosshair {template} color={crosshairPointColors} />
</VisXYContainer>

The template code in question:

const template = (d: UniqueVisitorData) => {return `<div>${d?.uniques.toString()}</div>`};

The resulting padding/margin that I can not get rid of:

Things I have tried:

I have tried removing padding / margin using p-0 / m-0 (Using tailwind obvi)
Negative padding / margin
Various kinds of different templates. This is the simplest one where I have no styling and there is still the padding / margin
Googling for this issue, StackOverflow, searching the Issues and Discussions here on GitHub

Any help would be appreciated. Thanks!

AshtonHannon · 2024-05-15T20:00:48Z

AshtonHannon
May 15, 2024
Author

Found that it was an issue in my CSS. Needed to apply --vis-tooltip-padding, --vis-tooltip-background-color, and --vis-tooltip-border-color. This was a little confusing as it's called a template in the prop. Nonetheless, issue solved with these CSS properties.

0 replies

rokotyan · 2024-06-20T18:45:01Z

rokotyan
Jun 20, 2024

@AshtonHannon A bit of a late reply, but thanks for sharing your findings! Agreed that it's a bit confusing, we'll think what to do about it in the future.

1 reply

simond07 Jul 3, 2024

Hey, I have encountered the same problem. Maybe there could be no additional styling by default when a template is passed into VisCrosshair. Thanks in advance and really great looking library :)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Can't get rid of padding/margin on VisCrosshair when using template #403

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Can't get rid of padding/margin on VisCrosshair when using template #403

Uh oh!

Uh oh!

AshtonHannon May 15, 2024

Replies: 2 comments · 1 reply

Uh oh!

AshtonHannon May 15, 2024 Author

Uh oh!

rokotyan Jun 20, 2024

Uh oh!

simond07 Jul 3, 2024

AshtonHannon
May 15, 2024

Replies: 2 comments 1 reply

AshtonHannon
May 15, 2024
Author

rokotyan
Jun 20, 2024