Improvement to Histograms #785

Activity

1. gaardhus commented on Feb 13, 2026

   

   gaardhus

   on Feb 13, 2026

   Author

   More actions

   Okay I just found the property to remove the gap between the bars: bandPadding={0}
2. techniq commented on Feb 13, 2026

   

   techniq

   on Feb 13, 2026

   Owner

   More actions

   Hey @gaardhus 👋, glad you're enjoying the library 🫶.

   The histogram examples are currently built with a bandScale (BarChart) which is why the axis ticks are centered instead of between the bins, which are incorrect.

   I just updated the examples on the new (WIP) docs to use a linear scale (to fix the axis) and leverage Rect (since Bar is only for band scale).

   

   This does make those examples a little more verbose by rendering explicit marks, and is (ab)using LineChart to simplify some of the setup (we could also have used <BarChart xScale={scaleLinear() ...> but that felt more abusive).

   <LineChart {data} x={['x0', 'x1']} y="length">
     {#snippet marks({ context })}
       {#each data as d}
         <Rect
           x={context.xScale(d.x0) + 1}
           y={context.yScale(d.length)}
           width={context.xScale(d.x1) - context.xScale(d.x0) - 2}
           height={context.yScale(0) - context.yScale(d.length)}
           class="fill-primary"
         />
       {/each}
     {/snippet}
   </LineChart>

   With that said, we've also been working on a new state-refactor overhaul which provides a TON of improvements, including aligning Chart and simplified charts (BarChart, LineChart, etc), so the use of LineChart above would be replaced with just Chart but still provides all the use cases of a LineChart (snippets with default impl, series support, etc).

   Also have plans to allow all primitives to also be data-driven with accessors (ex. <Rect x="x0" y={d => d.length}>) and a bunch of other things.

   I definitely think streamlining the histogram use cases, either via a Histogram "simplified component", or providing higher level abstraction building blocks (similar to ObservablePlot's transforms, which I've been contemplating for a while) is on the roadmap for sure, but have a lot of active threads at the moment.
3. techniq commented on Mar 25, 2026

   

   techniq

   on Mar 25, 2026

   Owner

   More actions

   In an upcoming release, all primitives, including Rect, are data aware and now histogram can be setup using:

   <Chart
   	{data}
   	x={['x0', 'x1']}
   	y="length"
   	height={300}
   >
   	{#snippet marks()}
   		<Rect x0="x0" y0={(d) => 0} x1="x1" y1="length" insets={{ x: 1 }} class="fill-primary" />
   	{/snippet}
   </Chart>

   For example:
   https://techniq-state-refactor.layerchart.pages.dev/docs/components/BarChart/histogram-vertical
4. techniq

   closed this as completedon Mar 25, 2026