diff --git a/src/ui/code-blocks/ReadingStatsCodeBlock.ts b/src/ui/code-blocks/ReadingStatsCodeBlock.ts
index f0fee29..5f9374c 100644
--- a/src/ui/code-blocks/ReadingStatsCodeBlock.ts
+++ b/src/ui/code-blocks/ReadingStatsCodeBlock.ts
@@ -46,7 +46,6 @@ const PieChart = z.object({
unit: z.optional(z.string()),
unitPlural: z.optional(z.string()),
groups: z.optional(z.array(PieGroupingSchema)),
- responsive: z.optional(z.boolean()),
color: z.optional(PieChartColorSchema),
});
@@ -58,7 +57,6 @@ const BarChart = z.object({
topN: z.optional(z.number()),
unit: z.optional(z.string()),
unitPlural: z.optional(z.string()),
- responsive: z.optional(z.boolean()),
color: z.optional(color),
});
@@ -70,7 +68,6 @@ const LineChart = z.object({
secondProperty: z.optional(z.keyof(BookMetadataSchema)),
secondUnit: z.optional(z.string()),
secondUnitPlural: z.optional(z.string()),
- responsive: z.optional(z.boolean()),
});
const BooksAndPagesChart = z.object({
diff --git a/src/ui/code-blocks/ReadingStatsCodeBlockView.svelte b/src/ui/code-blocks/ReadingStatsCodeBlockView.svelte
index 1b710e4..4ddf551 100644
--- a/src/ui/code-blocks/ReadingStatsCodeBlockView.svelte
+++ b/src/ui/code-blocks/ReadingStatsCodeBlockView.svelte
@@ -138,15 +138,11 @@
{:else if chart.type === "pie"}
-
+
{:else if chart.type === "books-and-pages"}
@@ -197,7 +193,7 @@
margin: 0 auto 1rem;
}
- &.bar.responsive {
+ &.bar.horizontal {
height: 35rem;
}
}
diff --git a/src/ui/components/charts/Bar.svelte b/src/ui/components/charts/Bar.svelte
index eb22a8d..b6f982d 100644
--- a/src/ui/components/charts/Bar.svelte
+++ b/src/ui/components/charts/Bar.svelte
@@ -12,7 +12,6 @@
topN?: number;
unit?: string;
unitPlural?: string;
- responsive?: boolean;
color?: "rainbow" | ColorName;
};
@@ -23,7 +22,6 @@
topN,
unit,
unitPlural,
- responsive,
color,
}: Props = $props();
@@ -107,8 +105,8 @@
},
options: {
indexAxis: horizontal ? "y" : "x",
- responsive,
- maintainAspectRatio: !responsive,
+ responsive: true,
+ maintainAspectRatio: !horizontal,
plugins: {
tooltip: {
yAlign: horizontal ? "center" : "bottom",
diff --git a/src/ui/components/charts/BookAndPages.svelte b/src/ui/components/charts/BookAndPages.svelte
index ff62c20..e0c61e8 100644
--- a/src/ui/components/charts/BookAndPages.svelte
+++ b/src/ui/components/charts/BookAndPages.svelte
@@ -99,6 +99,7 @@
datasets,
},
options: {
+ responsive: true,
scales: {
y: {
type: "linear",
diff --git a/src/ui/components/charts/Pie.svelte b/src/ui/components/charts/Pie.svelte
index 3a9cadc..6747c0c 100644
--- a/src/ui/components/charts/Pie.svelte
+++ b/src/ui/components/charts/Pie.svelte
@@ -14,12 +14,10 @@
groups?: PieGrouping[];
unit?: string;
unitPlural?: string;
- responsive?: boolean;
color?: PieChartColor;
};
- const { property, groups, unit, unitPlural, responsive, color }: Props =
- $props();
+ const { property, groups, unit, unitPlural, color }: Props = $props();
const store = createPropertyStore(property);
@@ -114,7 +112,7 @@
return {
type: "pie",
data: { labels, datasets: [{ data, backgroundColor }] },
- options: { responsive },
+ options: { responsive: true },
} as ChartConfiguration;
});