BarChart-padding

docs/src/examples/components/BarChart/axis-labels-inside-bars-using-labels.svelte

@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 

docs/src/examples/components/BarChart/axis-labels-inside-bars.svelte

@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 

docs/src/examples/components/BarChart/both-axis-grid-align-between.svelte

@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 

docs/src/examples/components/BarChart/both-axis-grid.svelte

@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 

docs/src/examples/components/BarChart/brushing.svelte

@@ -10,7 +10,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 

docs/src/examples/components/BarChart/color-bars-class.svelte

@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 

docs/src/examples/components/BarChart/color-per-value.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { BarChart } from 'layerchart';
+	import { BarChart, defaultChartPadding } from 'layerchart';
 	import { longData } from '$lib/utils/data.js';
 
 	const data = longData.filter((d) => d.year === 2019);
-
 	export { data };
 </script>
 
@@ -21,5 +20,6 @@
 	props={{
 		yAxis: { format: 'metric' }
 	}}
+	padding={{ ...defaultChartPadding(), left: 24 }}
 	height={300}
 />

docs/src/examples/components/BarChart/color-threshold.svelte

@@ -4,7 +4,6 @@
 	import { scaleThreshold } from 'd3-scale';
 
 	const data = createDateSeries({ count: 10, min: -20, max: 50, value: 'integer' });
-
 	export { data };
 </script>
 

docs/src/examples/components/BarChart/color-using-scale.svelte

@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 

docs/src/examples/components/BarChart/custom-chart.svelte

@@ -10,7 +10,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 

docs/src/examples/components/BarChart/custom-tooltip.svelte

@@ -10,7 +10,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 

docs/src/examples/components/BarChart/duration-bars-color.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { BarChart, defaultChartPadding, Tooltip } from 'layerchart';
 	import { scaleTime } from 'd3-scale';
 	import { timeMinute, timeDay } from 'd3-time';
 	import { Duration } from 'svelte-ux';
-	import { BarChart, Tooltip } from 'layerchart';
 	import { getRandomInteger } from '$lib/utils/data.js';
 
 	const count = 10;
@@ -19,7 +19,6 @@
 			endDate
 		};
 	});
-
 	export { data };
 </script>
 
@@ -37,7 +36,7 @@
 	]}
 	grid={{ x: false, y: true, bandAlign: 'between' }}
 	orientation="horizontal"
-	padding={{ left: 36, bottom: 36 }}
+	padding={{ ...defaultChartPadding(), left: 36, right: 20 }}
 	height={300}
 >
 	{#snippet tooltip({ context })}

docs/src/examples/components/BarChart/duration-bars-dense-lanes.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
+	import { BarChart, defaultChartPadding, Tooltip } from 'layerchart';
 	import { scaleTime } from 'd3-scale';
 	import { Duration } from 'svelte-ux';
-	import { BarChart, Tooltip } from 'layerchart';
 	import { getUsEvents } from '$lib/data.remote';
 	import { applyLanes } from 'layerchart';
 
 	const usEvents = await getUsEvents();
 	const data = applyLanes(usEvents, { start: 'startDate', end: 'endDate' });
-
 	export { data };
 </script>
 
@@ -20,7 +19,7 @@
 	grid={{ x: true, y: false, bandAlign: 'between' }}
 	rule={false}
 	orientation="horizontal"
-	padding={{ bottom: 36 }}
+	padding={{ ...defaultChartPadding(), left: 10, right: 25 }}
 	height={300}
 	props={{ tooltip: { context: { mode: 'bounds' } } }}
 >

docs/src/examples/components/BarChart/duration-bars-dense.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
+	import { BarChart, defaultChartPadding, Tooltip } from 'layerchart';
 	import { scaleTime } from 'd3-scale';
 	import { Duration } from 'svelte-ux';
-	import { BarChart, Tooltip } from 'layerchart';
 	import { getUsEvents } from '$lib/data.remote';
 
 	const data = await getUsEvents();
-
 	export { data };
 </script>
 
@@ -18,7 +17,7 @@
 	grid={{ x: true, y: false, bandAlign: 'between' }}
 	rule={false}
 	orientation="horizontal"
-	padding={{ bottom: 36 }}
+	padding={{ ...defaultChartPadding(), right: 25 }}
 	height={300}
 >
 	{#snippet tooltip({ context })}

docs/src/examples/components/BarChart/duration-bars-lanes.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { BarChart, defaultChartPadding, Tooltip } from 'layerchart';
 	import { scaleTime } from 'd3-scale';
 	import { timeMinute, timeDay } from 'd3-time';
 	import { Duration } from 'svelte-ux';
-	import { BarChart, Tooltip } from 'layerchart';
 	import { getRandomInteger } from '$lib/utils/data.js';
 	import { applyLanes } from 'layerchart';
 
@@ -22,7 +22,6 @@
 	});
 
 	const data = applyLanes(generatedData, { start: 'startDate', end: 'endDate' });
-
 	export { data };
 </script>
 
@@ -42,7 +41,7 @@
 	grid={{ x: true, y: false, bandAlign: 'between' }}
 	rule={false}
 	orientation="horizontal"
-	padding={{ left: 36, bottom: 36 }}
+	padding={{ ...defaultChartPadding(), left: 25, right: 25 }}
 	height={300}
 	props={{ tooltip: { context: { mode: 'bounds' } } }}
 >

docs/src/examples/components/BarChart/duration-bars.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { BarChart, defaultChartPadding, Tooltip } from 'layerchart';
 	import { scaleTime } from 'd3-scale';
 	import { timeMinute, timeDay } from 'd3-time';
 	import { Duration } from 'svelte-ux';
-	import { BarChart, Tooltip } from 'layerchart';
 	import { getRandomInteger } from '$lib/utils/data.js';
 
 	const count = 10;
@@ -19,7 +19,6 @@
 			endDate
 		};
 	});
-
 	export { data };
 </script>
 
@@ -30,7 +29,7 @@
 	y="name"
 	grid={{ x: false, y: true, bandAlign: 'between' }}
 	orientation="horizontal"
-	padding={{ left: 36, bottom: 36 }}
+	padding={{ ...defaultChartPadding(), left: 36, right: 20 }}
 	height={300}
 >
 	{#snippet tooltip({ context })}

docs/src/examples/components/BarChart/duration-civilization-timeline-dense.svelte

@@ -3,11 +3,11 @@
 	import { getCivilizationEvents } from '$lib/data.remote.js';
 
 	const data = await getCivilizationEvents();
-	export { data };
 
 	function formatYear(number: number): string {
 		return Math.sign(number) === -1 ? Math.abs(number) + ' BC' : number + ' AD';
 	}
+	export { data };
 </script>
 
 <BarChart

docs/src/examples/components/BarChart/duration-civilization-timeline.svelte

@@ -3,11 +3,11 @@
 	import { getCivilizationEvents } from '$lib/data.remote.js';
 
 	const data = await getCivilizationEvents();
-	export { data };
 
 	function formatYear(number: number): string {
 		return Math.sign(number) === -1 ? Math.abs(number) + ' BC' : number + ' AD';
 	}
+	export { data };
 </script>
 
 <BarChart

docs/src/examples/components/BarChart/duration-points-color.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { BarChart, defaultChartPadding, Points, Rule, Tooltip } from 'layerchart';
 	import { scaleTime } from 'd3-scale';
 	import { timeMinute, timeDay } from 'd3-time';
 	import { Duration } from 'svelte-ux';
-	import { BarChart, Points, Rule, Tooltip } from 'layerchart';
 	import { getRandomInteger } from '$lib/utils/data.js';
 
 	const count = 10;
@@ -19,7 +19,6 @@
 			endDate
 		};
 	});
-
 	export { data };
 </script>
 
@@ -37,7 +36,7 @@
 	]}
 	grid={{ x: false, y: true, bandAlign: 'between' }}
 	orientation="horizontal"
-	padding={{ left: 36, bottom: 36 }}
+	padding={{ ...defaultChartPadding(), left: 36, right: 25 }}
 	props={{
 		highlight: {
 			axis: 'x',

docs/src/examples/components/BarChart/duration-points.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { BarChart, defaultChartPadding, Points, Rule, Tooltip } from 'layerchart';
 	import { scaleTime } from 'd3-scale';
 	import { timeMinute, timeDay } from 'd3-time';
 	import { Duration } from 'svelte-ux';
-	import { BarChart, Points, Rule, Tooltip } from 'layerchart';
 	import { getRandomInteger } from '$lib/utils/data.js';
 
 	const count = 10;
@@ -19,7 +19,6 @@
 			endDate
 		};
 	});
-
 	export { data };
 </script>
 
@@ -30,7 +29,7 @@
 	y="name"
 	grid={{ x: false, y: true, bandAlign: 'between' }}
 	orientation="horizontal"
-	padding={{ left: 36, bottom: 36 }}
+	padding={{ ...defaultChartPadding(), left: 36, right: 25 }}
 	props={{
 		highlight: {
 			axis: 'x',

docs/src/examples/components/BarChart/duration.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BarChart, Tooltip } from 'layerchart';
+	import { BarChart, defaultChartPadding, Tooltip } from 'layerchart';
 	import { scaleTime } from 'd3-scale';
 	import { format } from '@layerstack/utils';
 
@@ -50,7 +50,6 @@
 			end: new Date('2021-12-31')
 		}
 	];
-
 	export { data };
 </script>
 
@@ -79,6 +78,7 @@
 			context: { mode: 'bounds' }
 		}
 	}}
+	padding={{ ...defaultChartPadding(), left: 30 }}
 	height={400}
 >
 	{#snippet tooltip({ context })}

docs/src/examples/components/BarChart/gradient.svelte

@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 

docs/src/examples/components/BarChart/group-series-bar-click.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { BarChart } from 'layerchart';
+	import { BarChart, defaultChartPadding } from 'layerchart';
 	import { wideData } from '$lib/utils/data.js';
 
 	const data = wideData;
-
 	export { data };
 </script>
 
@@ -26,6 +25,7 @@
 		}
 	]}
 	seriesLayout="group"
+	padding={{ ...defaultChartPadding(), left: 24 }}
 	props={{
 		xAxis: { format: 'none' },
 		yAxis: { format: 'metric' },

docs/src/examples/components/BarChart/group-series-horizontal.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { BarChart } from 'layerchart';
+	import { BarChart, defaultChartPadding } from 'layerchart';
 	import { wideData } from '$lib/utils/data.js';
 
 	const data = wideData;
-
 	export { data };
 </script>
 
@@ -34,5 +33,6 @@
 			header: { format: 'none' }
 		}
 	}}
+	padding={{ ...defaultChartPadding(), left: 24 }}
 	height={500}
 />

docs/src/examples/components/BarChart/group-series-labels.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { accessor, BarChart, Text } from 'layerchart';
+	import { BarChart, defaultChartPadding, accessor, Text } from 'layerchart';
 	import { wideData } from '$lib/utils/data.js';
 
 	const data = wideData;
-
 	export { data };
 </script>
 
@@ -34,6 +33,7 @@
 			header: { format: 'none' }
 		}
 	}}
+	padding={{ ...defaultChartPadding(), left: 24 }}
 	height={300}
 >
 	<!-- Workaround until x1Scale is directly handled by Points/Labels: https://github.com/techniq/layerchart/issues/473#issuecomment-3266370636 -->