Skip to content

Axis-padding #717

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
techniq merged 2 commits into from
Dec 7, 2025
Merged

Axis-padding #717

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7a34c46
Axis-padding
cycle4passion Dec 6, 2025
ab7e75d
Merge branch 'docs-v2' into axis-padding
techniq Dec 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions docs/src/examples/components/Axis/multiline-tick-labels.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
<script lang="ts">
import { Axis, Chart, Layer } from 'layerchart';
import { Axis, Chart, Layer, defaultChartPadding } from 'layerchart';
import { timeMonth, timeYear } from 'd3-time';
import { startOfInterval } from '@layerstack/utils';

const today = startOfInterval('day', new Date());
</script>

<Chart xDomain={[timeYear.offset(today, -2), today]} padding={24} height={48}>
<Chart
xDomain={[timeYear.offset(today, -2), today]}
padding={{ ...defaultChartPadding(), bottom: 30 }}
height={48}
>
<Layer>
<Axis
placement="bottom"
Expand Down
8 changes: 6 additions & 2 deletions docs/src/examples/components/Axis/multiple-axis-same-placement-bottom.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
<script lang="ts">
import { Axis, Chart, Layer } from 'layerchart';
import { Axis, Chart, Layer, defaultChartPadding } from 'layerchart';
import { timeMonth, timeYear } from 'd3-time';
import { startOfInterval } from '@layerstack/utils';

const today = startOfInterval('day', new Date());
</script>

<Chart xDomain={[timeYear.offset(today, -2), today]} padding={24} height={48}>
<Chart
xDomain={[timeYear.offset(today, -2), today]}
padding={{ ...defaultChartPadding(), bottom: 32 }}
height={48}
>
<Layer>
<Axis
placement="bottom"
Expand Down
4 changes: 2 additions & 2 deletions docs/src/examples/components/Axis/multiple-axis-same-placement-right.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<script lang="ts">
import { Axis, Chart, Layer } from 'layerchart';
import { Axis, Chart, Layer, defaultChartPadding } from 'layerchart';
import { scaleLinear } from 'd3-scale';
import { range } from 'd3-array';
</script>

<Chart yDomain={[0, 100]} padding={{ top: 8, bottom: 8, right: 90 }} height={300}>
<Chart yDomain={[0, 100]} padding={{ ...defaultChartPadding(), right: 90 }} height={300}>
{#snippet children({ context })}
<Layer>
<Axis
Expand Down
3 changes: 2 additions & 1 deletion docs/src/examples/components/Axis/radial-grid.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@
import { timeDay } from 'd3-time';

const today = startOfInterval('day', new Date());
const yesterday = new Date(today.getTime() - 1);
</script>

<Chart
xDomain={[timeDay.offset(today, -10), today]}
xDomain={[timeDay.offset(today, -10), yesterday]}
yDomain={[0, 100]}
radial
padding={24}
Expand Down
3 changes: 2 additions & 1 deletion docs/src/examples/components/Axis/radial-rule.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@
import { timeDay } from 'd3-time';

const today = startOfInterval('day', new Date());
const yesterday = new Date(today.getTime() - 1);
</script>

<Chart
xDomain={[timeDay.offset(today, -10), today]}
xDomain={[timeDay.offset(today, -10), yesterday]}
yDomain={[0, 100]}
radial
padding={24}
Expand Down
8 changes: 6 additions & 2 deletions docs/src/examples/components/Axis/remove-tick-marks.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
<script lang="ts">
import { Axis, Chart, Layer } from 'layerchart';
import { Axis, Chart, Layer, defaultChartPadding } from 'layerchart';
import { timeDay } from 'd3-time';
import { startOfInterval } from '@layerstack/utils';

const today = startOfInterval('day', new Date());
</script>

<Chart xDomain={[timeDay.offset(today, -10), today]} padding={24} height={48}>
<Chart
xDomain={[timeDay.offset(today, -10), today]}
padding={{ ...defaultChartPadding(), bottom: 40 }}
height={48}
>
<Layer>
<Axis placement="bottom" rule tickMarks={false} />
</Layer>
Expand Down
7 changes: 5 additions & 2 deletions docs/src/examples/components/Axis/time-scale-auto-multiline.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { Axis, Chart, Layer } from 'layerchart';
import { Axis, Chart, Layer, defaultChartPadding } from 'layerchart';
import {
timeDay,
timeHour,
Expand Down Expand Up @@ -112,7 +112,10 @@
<div>
<div class="text-sm mb-1">{example.label}</div>
<div class="h-[100px] p-4 border rounded-sm">
<Chart xDomain={example.domain} padding={{ top: 20, bottom: 20, left: 20, right: 20 }}>
<Chart
xDomain={example.domain}
padding={{ ...defaultChartPadding(), top: 30, bottom: 30, left: 25, right: 25 }}
>
<Layer>
<Axis placement="top" rule grid tickMultiline {tickSpacing} />
<Axis placement="bottom" rule grid tickMultiline {tickSpacing} />
Expand Down
4 changes: 2 additions & 2 deletions docs/src/examples/components/Axis/time-scale-brush-multiline.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { Axis, Chart, Layer, type DomainType } from 'layerchart';
import { Axis, Chart, Layer, defaultChartPadding, type DomainType } from 'layerchart';
import { timeYear } from 'd3-time';
import { startOfInterval } from '@layerstack/utils';
import AxisControls from '$lib/components/controls/AxisControls.svelte';
Expand All @@ -17,7 +17,7 @@
<Chart
{xDomain}
yDomain={[0, 100]}
padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
padding={{ ...defaultChartPadding(), top: 30, bottom: 30, left: 25, right: 25 }}
brush={{
resetOnEnd: true,
onBrushEnd: (e) => {
Expand Down
7 changes: 5 additions & 2 deletions docs/src/examples/components/Axis/time-scale-explicit-multiline.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { Axis, Chart, Layer } from 'layerchart';
import { Axis, Chart, Layer, defaultChartPadding } from 'layerchart';
import {
timeDay,
timeHour,
Expand Down Expand Up @@ -107,7 +107,10 @@
<div>
<div class="text-sm mb-1">{example.label}</div>
<div class="h-[100px] p-4 border rounded-sm">
<Chart xDomain={example.domain} padding={{ top: 20, bottom: 20, left: 20, right: 20 }}>
<Chart
xDomain={example.domain}
padding={{ ...defaultChartPadding(), top: 20, bottom: 30, left: 30, right: 30 }}
>
<Layer>
<Axis
placement="bottom"
Expand Down
7 changes: 5 additions & 2 deletions docs/src/examples/components/Axis/time-scale-explicit.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { Axis, Chart, Layer } from 'layerchart';
import { Axis, Chart, Layer, defaultChartPadding } from 'layerchart';
import {
timeDay,
timeHour,
Expand Down Expand Up @@ -107,7 +107,10 @@
<div>
<div class="text-sm mb-1">{example.label}</div>
<div class="h-[100px] p-4 border rounded-sm">
<Chart xDomain={example.domain} padding={{ top: 20, bottom: 20, left: 20, right: 20 }}>
<Chart
xDomain={example.domain}
padding={{ ...defaultChartPadding(), top: 20, bottom: 20, left: 30, right: 30 }}
>
<Layer>
<Axis placement="bottom" rule grid ticks={{ interval: example.interval }} />
</Layer>
Expand Down
7 changes: 6 additions & 1 deletion docs/src/examples/components/LineChart/axis-labels-inside.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,10 @@
rule: true
}
}}
padding={{ ...defaultChartPadding(), top: 15, right: 10 }}
padding={{
left: 0,
top: 12,
right: 10,
bottom: 24
}}
/>
Loading