I'm trying to add tooltips to a chart I made with Layer Cake, the graphics framework for Svelte. I looked at the Map example on the Layer Cake site, as that one has tooltips, but I can't figure out how to adapt for my bar chart.
I can't even get a string to show up, much less any data. Any help would be greatly appreciated. I think I must be missing something pretty obvious.
Below is a minimal example with dummy data.
You can see the code working in this REPL:https://svelte.dev/repl/e8bb579754e6405ea19363b5d13d7f54?version=3.55.1
Thanks!
App.svelte:
<script> import { LayerCake, Svg, Html } from "layercake"; import Bar from "./Bar.svelte"; import AxisX from "./AxisX.svelte"; import AxisY from "./AxisY.svelte"; import Tooltip from "./Tooltip.html.svelte"; import { scaleBand } from "d3-scale"; let data = [ { fruit: "Apple", number: 364, }, { fruit: "Banana", number: 263, }, { fruit: "Mango", number: 872, }, { fruit: "Pear", number: 156, }, ] data.forEach((d) => { d[xKey] = +d[xKey]; }); const xKey = "number"; const yKey = "fruit"; let evt; let hideTooltip = false;</script><div class="chart-container"><LayerCake padding={{ top: 20, bottom: 80, left: 60, right:40 }} x={xKey} y={yKey} yScale={scaleBand().paddingInner([0.15])} xDomain={[0, null]} data={data}><Svg><AxisX gridlines={true} baseline={true} snapTicks={true} ticks="4" /><AxisY gridlines={false} /><Bar /></Svg><Html pointerEvents={false}> {#if hideTooltip !== true}<Tooltip {evt}> {@const tooltipData = {data}} {#each Object.entries(tooltipData) as [key, value]} {console.log('tooltipData',tooltipData)}<div class="row">hi is this showing up?</div> {/each}</Tooltip> {/if}</Html></LayerCake></div><style> .chart-container { width: 600px; height: 300px; }</style>The other components are taken directly from the LayerCake framework.