`CandleChart` feature request

[l0uisgrange]

Hey @techniq 👋,

Seems your project is skyrocketing, congratulations!
The shadcn-svelte integration is very very clean, and I'm kind of jealous of the new LineChart very simple implementation and also your latest improvement in bundle size.
I think you may have created the best visualization library on the whole internet 😳!

I would love to have the same API for candlesticks (e.g. Candlechart, sorry to annoy you again, maybe I'm the only one needing this). I know it's a relatively big feature, so I would like to start smaller.
I tried using the candlestick example and make it work with the current shadcn-svelte charts implementation, but could not manage to make something work sadly 🥲...

Anyway, here's what I tried:

<Chart
    {data}
    ... // typical arguments
    props={{
        rule: { oc: { color: "var(--chart-1)" }, hl: { color: "var(--chart-1)" } },
        highlight: { lines: true, axis: "both" },
    }}
>
    {#snippet tooltip()}
        <ChartTooltip labelFormatter={(v, _) => dayjs(v).format('LL')} />
    {/snippet}
</Chart >

Also, I tried highlight using lines instead of points, with axis: "both" on a classic LineChart and does not seem to work (only the dot shows like below). Am I doing something wrong?

[techniq]

Hey @l0uisgrange 👋. Glad you're enjoying LayerChart 🫶

I've considered adding more simplified charts, but also in recent versions have pushed to make sure the difference between Chart and LineChart/etc are near-zero, particularly from the big state-refactor in 2.0.0-next.47. The need for them is greatly reduced now that marks are series aware, and state has been fully centralized.

The basic setup for a candlestick chart is:

• Use 2 Rule instances with array accessors to draw a line for high/low, and open/close
• Using tooltipContext={{ mode: 'quadtree-x' }} for efficient x-axis tooltip detection (can also use bisect-x)
• Use the color scale (c, cDomain, cRange) to easily drive the colors based on open/close delta

<script lang="ts">
	import { Axis, Chart, Highlight, Layer, Rule, Tooltip } from 'layerchart';
</script>

<Chart
	{data}
	x="date"
	y={['high', 'low']}
	yNice
	c={(d) => (d.close < d.open ? 'desc' : 'asc')}
	cDomain={['desc', 'asc']}
	cRange={['var(--color-danger)', 'var(--color-success)']}
	padding={{ left: 20, bottom: 32, top: 20 }}
	tooltipContext={{ mode: 'quadtree-x' }}
	height={300}
>
	<Layer>
		<Axis placement="left" grid rule tickSpacing={20} />
		<Axis placement="bottom" rule tickMultiline />
		<Rule y={['high', 'low']} />
		<Rule y={['open', 'close']} strokeWidth={3} />
		<Highlight lines />
	</Layer>

	<Tooltip.Root>
		{#snippet children({ data })}
			<Tooltip.Header value={data.date} format="day" />
			<Tooltip.List>
				<Tooltip.Item label="Open" value={data.open} format="decimal" />
				<Tooltip.Item label="Close" value={data.close} format="decimal" />
				<Tooltip.Item label="High" value={data.high} format="decimal" />
				<Tooltip.Item label="Low" value={data.low} format="decimal" />
			</Tooltip.List>
		{/snippet}
	</Tooltip.Root>
</Chart>

If you can share a project I can checkout, I can see where you might be running into issues.