diff --git a/packages/lib/src/components/charts/lume-alluvial-diagram/lume-alluvial-diagram.stories.ts b/packages/lib/src/components/charts/lume-alluvial-diagram/lume-alluvial-diagram.stories.ts
index 86872853..4e3da08f 100644
--- a/packages/lib/src/components/charts/lume-alluvial-diagram/lume-alluvial-diagram.stories.ts
+++ b/packages/lib/src/components/charts/lume-alluvial-diagram/lume-alluvial-diagram.stories.ts
@@ -1,4 +1,6 @@
 import { ref } from 'vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
+
 import {
   actionEventHandlerTemplate,
   captureAction,
@@ -13,7 +15,7 @@ import LumeAlluvialNodeValue from '../../groups/lume-alluvial-group/components/l
 import LumeTooltip from '../../core/lume-tooltip';
 import { options as defaultOptions } from './defaults';
 
-export default {
+const meta: Meta<typeof LumeAlluvialDiagram> = {
   title: 'Charts/Alluvial diagram',
   component: LumeAlluvialDiagram,
   argTypes: {
@@ -46,60 +48,85 @@ export default {
   },
 };
 
-const Template = ({ args }) => {
-  return {
+export default meta;
+
+type Story = StoryObj<typeof LumeAlluvialDiagram>;
+
+export const Basic: Story = {
+  render: ({ args }) => ({
     components: { LumeAlluvialDiagram },
     setup() {
-      return { args };
+      return { args, captureAction };
     },
-    methods: { captureAction },
-    template: `
-      <div :style="{ width: args.width + 'px', height: args.height + 'px' }">
-        <lume-alluvial-diagram v-bind="args" ${actionEventHandlerTemplate} />
-      </div>
-  `,
-  };
-};
-
-export const Basic = Template.bind({});
-Basic.args = {
-  ...DATASETS.Basic,
-  title: 'Students performance in science exam',
+    template: `<div :style="{ width: args.width + 'px', height: args.height + 'px' }">
+    <lume-alluvial-diagram v-bind="args" ${actionEventHandlerTemplate} />
+  </div>`,
+  }),
+  args: {
+    ...DATASETS.Basic,
+    title: 'Students performance in science exam',
+  },
 };
 
-export const MultipleLevels = Template.bind({});
-MultipleLevels.args = {
-  ...withSizeArgs(),
-  ...DATASETS.MultipleLevels,
-  options: {
-    ...defaultOptions,
-    valueFormat: (part, _) => `USD ${part}`,
+export const MultipleLevels: Story = {
+  render: ({ args }) => ({
+    components: { LumeAlluvialDiagram },
+    setup() {
+      return { args, captureAction };
+    },
+    template: `<div :style="{ width: args.width + 'px', height: args.height + 'px' }">
+    <lume-alluvial-diagram v-bind="args" ${actionEventHandlerTemplate} />
+  </div>`,
+  }),
+  args: {
+    ...withSizeArgs(720),
+    ...DATASETS.MultipleLevels,
+    options: {
+      valueFormat: (part, _) => `USD ${part}`,
+      gradient: true,
+    },
+    title: 'Yearly average pet expenses in USA',
   },
-  title: 'Yearly average pet expenses in USA',
 };
 
-export const MultipleLevelsWithColorDerivationFromIncomingLinks = Template.bind(
-  {}
-);
-MultipleLevelsWithColorDerivationFromIncomingLinks.args = {
-  ...withSizeArgs(),
-  ...DATASETS.MultipleLevelsWithColorDerivationFromIncomingLinks,
-  title: 'Color derivation from incoming links',
+export const MultipleLevelsWithColorDerivationFromIncomingLinks: Story = {
+  render: ({ args }) => ({
+    components: { LumeAlluvialDiagram },
+    setup() {
+      return { args, captureAction };
+    },
+    template: `<div :style="{ width: args.width + 'px', height: args.height + 'px' }">
+    <lume-alluvial-diagram v-bind="args" ${actionEventHandlerTemplate} />
+  </div>`,
+  }),
+  args: {
+    ...DATASETS.MultipleLevelsWithColorDerivationFromIncomingLinks,
+    title: 'Color derivation from incoming links',
+  },
 };
 
-export const CustomCurveFunction = Template.bind({});
-CustomCurveFunction.args = {
-  ...withSizeArgs(540, 220),
-  ...DATASETS.CustomCurveFunction,
-  options: {
-    ...defaultOptions,
-    valueFormat: (part, _) => `USD ${part}`,
+export const CustomCurveFunction: Story = {
+  render: ({ args }) => ({
+    components: { LumeAlluvialDiagram },
+    setup() {
+      return { args, captureAction };
+    },
+    template: `<div :style="{ width: args.width + 'px', height: args.height + 'px' }">
+    <lume-alluvial-diagram v-bind="args" ${actionEventHandlerTemplate} />
+  </div>`,
+  }),
+  args: {
+    ...withSizeArgs(540, 220),
+    ...DATASETS.CustomCurveFunction,
+    options: {
+      valueFormat: (part, _) => `USD ${part}`,
+    },
+    title: 'November expenses on my cats',
   },
-  title: 'November expenses on my cats',
 };
 
-const CustomNodeSlotsTemplate = ({ args }) => {
-  return {
+export const CustomNodeSlots: Story = {
+  render: ({ args }) => ({
     components: {
       LumeTooltip,
       LumeAlluvialDiagram,
@@ -110,42 +137,45 @@ const CustomNodeSlotsTemplate = ({ args }) => {
       const targetElement = ref(null);
       return { args, targetElement };
     },
-    methods: { captureAction },
-    template: `
-      <div :style="{ width: args.width + 'px', height: args.height + 'px' }">
-        <lume-alluvial-diagram v-bind="args">
-          <template #node-text-students="{ node }">
-            <tspan
-              style="cursor: pointer;"
-              @mouseenter.native="targetElement = $event.target"
-              @mouseleave.native="targetElement = null"
-            >ℹ️</tspan>
-            <lume-alluvial-node-label dx="4">Custom label</lume-alluvial-node-label>
-            <lume-alluvial-node-value>
-              <tspan style="font-style: italic; fill: green">+{{ Math.round((node.transitionValue || node.value) * 0.12 * 100) / 100 }}%</tspan>
-              {{ node.transitionValue || node.value }}
-            </lume-alluvial-node-value>
-          </template>
-          <template #tooltip="props">
-            <lume-tooltip v-bind="props" v-if="!!targetElement" :opened="!!targetElement" :target-element="targetElement">
-              Some additional info about the node.
-            </lume-tooltip>
-          </template>
-        </lume-alluvial-diagram>
-      </div>
-      `,
-  };
-};
-
-export const CustomNodeSlots = CustomNodeSlotsTemplate.bind({});
-CustomNodeSlots.args = {
-  ...withSizeArgs(),
-  ...DATASETS.Basic,
-  title: 'Students performance in science exam',
+    template: `<div :style="{ width: args.width + 'px', height: args.height + 'px' }">
+    <lume-alluvial-diagram v-bind="args">
+      <template #node-text-students="{ node }">
+        <tspan
+          style="cursor: pointer;"
+          @mouseenter.native="targetElement = $event.target"
+          @mouseleave.native="targetElement = null"
+        >ℹ️</tspan>
+        <lume-alluvial-node-label dx="4">Custom label</lume-alluvial-node-label>
+        <lume-alluvial-node-value>
+          <tspan style="font-style: italic; fill: green">+{{ Math.round((node.transitionValue || node.value) * 0.12 * 100) / 100 }}%</tspan>
+          {{ node.transitionValue || node.value }}
+        </lume-alluvial-node-value>
+      </template>
+      <template #tooltip="props">
+        <lume-tooltip v-bind="props" v-if="!!targetElement" :opened="!!targetElement" :target-element="targetElement">
+          Some additional info about the node.
+        </lume-tooltip>
+      </template>
+    </lume-alluvial-diagram>
+  </div>`,
+  }),
+  args: {
+    ...DATASETS.Basic,
+    title: 'Students performance in science exam',
+  },
 };
 
-export const Empty = Template.bind({});
-Empty.args = {
-  ...withSizeArgs(),
-  ...DATASETS.Empty,
+export const Empty: Story = {
+  render: ({ args }) => ({
+    components: { LumeAlluvialDiagram },
+    setup() {
+      return { args, captureAction };
+    },
+    template: `<div :style="{ width: args.width + 'px', height: args.height + 'px' }">
+    <lume-alluvial-diagram v-bind="args" ${actionEventHandlerTemplate} />
+  </div>`,
+  }),
+  args: {
+    ...DATASETS.Empty,
+  },
 };
diff --git a/packages/lib/src/components/charts/lume-line-chart/lume-line-chart.stories.ts b/packages/lib/src/components/charts/lume-line-chart/lume-line-chart.stories.ts
index d4e093b6..86237448 100644
--- a/packages/lib/src/components/charts/lume-line-chart/lume-line-chart.stories.ts
+++ b/packages/lib/src/components/charts/lume-line-chart/lume-line-chart.stories.ts
@@ -1,3 +1,6 @@
+import { computed } from 'vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
+
 import {
   actionEventHandlerTemplate,
   captureAction,
@@ -8,11 +11,9 @@ import DATASETS from '@/docs/storybook-data/base-data';
 
 import LumeLineChart from './lume-line-chart.vue';
 import LumeTooltip from '../../core/lume-tooltip/index';
-import { options as defaultOptions } from './defaults';
-import { computed } from 'vue';
 import { Colors } from '@/utils/constants';
 
-export default {
+const meta: Meta<typeof LumeLineChart> = {
   title: 'Charts/Line chart',
   component: LumeLineChart,
   argTypes: {
@@ -31,7 +32,7 @@ export default {
     },
     title: {
       control: 'text',
-      description: 'Chart title.',
+      description: 'Chart title',
     },
     hoveredIndex: {
       control: 'number',
@@ -40,78 +41,98 @@ export default {
   },
   args: {
     ...withSizeArgs(),
-    options: defaultOptions,
     title: 'Line chart',
   },
 };
 
-const Template = ({ args }) => ({
-  components: { LumeLineChart },
-  setup() {
-    return { args };
-  },
-  methods: { captureAction },
-  template: `
-    <div :style="{ width: args.width + 'px', height: args.height + 'px' }">
-        <lume-line-chart v-bind="args" ${actionEventHandlerTemplate} />
-    </div>
-  `,
-});
+export default meta;
 
-export const Basic = Template.bind({});
-Basic.args = {
-  ...DATASETS.CatsMetIn2023,
-};
+type Story = StoryObj<typeof LumeLineChart>;
 
-export const MultipleDatasets = Template.bind({});
-MultipleDatasets.args = {
-  ...DATASETS.AnimalsMetIn2023,
+export const Basic: Story = {
+  render: ({ args }) => ({
+    components: { LumeLineChart },
+    setup() {
+      return { args, captureAction };
+    },
+    template: `<div :style="{ width: args.width + 'px', height: args.height + 'px' }">
+    <lume-line-chart v-bind="args" ${actionEventHandlerTemplate} />
+</div>`,
+  }),
+  args: {
+    ...DATASETS.CatsMetIn2023,
+    title: 'Cats met in 2023',
+  },
 };
 
-const CustomTemplate = ({ args }) => ({
-  components: { LumeLineChart, LumeTooltip },
-  setup() {
-    const computedColor = computed(() => Colors[args.color]);
-    const customItemsFunction = (data, hoveredIndex) => {
-      if (hoveredIndex > -1) {
-        const { color, label, values } = data[0];
-        return [
-          {
-            color,
-            label,
-            value: values[hoveredIndex].value ?? 0,
-          },
-        ];
-      }
-      return [];
-    };
-    return { args, customItemsFunction, computedColor };
+export const MultipleDatasets: Story = {
+  render: ({ args }) => ({
+    components: { LumeLineChart },
+    setup() {
+      return { args, captureAction };
+    },
+    template: `<div :style="{ width: args.width + 'px', height: args.height + 'px' }">
+    <lume-line-chart v-bind="args" ${actionEventHandlerTemplate} />
+</div>`,
+  }),
+  args: {
+    ...DATASETS.AnimalsMetIn2023,
+    title: 'Pets met in 2023',
   },
-  template: `
-  <div :style="{ width: args.width + 'px', height: args.orientation !== 'horizontal' ? args.height + 'px' : undefined }">
-  <lume-line-chart v-bind="args" :color="computedColor">
-    <template #tooltip = "{ data, hoveredIndex, targetElement }">
-      <lume-tooltip :items="customItemsFunction(data, hoveredIndex)" :target-element="targetElement" position="top"/>
-    </template>
-  </lume-line-chart>
-</div>
-  `,
-});
+};
 
-export const CustomTooltip = CustomTemplate.bind({});
-CustomTooltip.args = {
-  ...DATASETS.Single,
-  options: {
-    yAxisOptions: {
-      skip: 2,
+export const CustomTooltip: Story = {
+  render: ({ args }) => ({
+    components: { LumeLineChart, LumeTooltip },
+    setup() {
+      const computedColor = computed(() => Colors[args.color]);
+      const customItemsFunction = (data, hoveredIndex) => {
+        if (hoveredIndex > -1) {
+          const { color, label, values } = data[0];
+          return [
+            {
+              color,
+              label,
+              value: `${values[hoveredIndex].value ?? 0} dogs`,
+            },
+          ];
+        }
+        return [];
+      };
+      return { args, customItemsFunction, computedColor };
     },
-    xAxisOptions: {
-      skip: 2,
+    template: `<div :style="{ width: args.width + 'px', height: args.height + 'px' }">
+    <lume-line-chart v-bind="args">
+      <template #tooltip = "{ data, hoveredIndex, targetElement }">
+        <lume-tooltip :items="customItemsFunction(data, hoveredIndex)" :target-element="targetElement" position="top"/>
+      </template>
+    </lume-line-chart>
+  </div>`,
+  }),
+  args: {
+    ...DATASETS.Single,
+    options: {
+      yAxisOptions: {
+        skip: 2,
+      },
+      xAxisOptions: {
+        skip: 2,
+      },
     },
   },
 };
 
-export const Empty = Template.bind({});
-Empty.args = {
-  ...DATASETS.Empty,
+export const Empty: Story = {
+  render: ({ args }) => ({
+    components: { LumeLineChart },
+    setup() {
+      return { args, captureAction };
+    },
+    template: `<div :style="{ width: args.width + 'px', height: args.height + 'px' }">
+    <lume-line-chart v-bind="args" ${actionEventHandlerTemplate} />
+</div>`,
+  }),
+  args: {
+    ...DATASETS.Empty,
+  },
 };
diff --git a/packages/lib/src/components/charts/lume-sparkline-chart/lume-sparkline-chart.stories.ts b/packages/lib/src/components/charts/lume-sparkline-chart/lume-sparkline-chart.stories.ts
index f96b7e0e..799653f1 100644
--- a/packages/lib/src/components/charts/lume-sparkline-chart/lume-sparkline-chart.stories.ts
+++ b/packages/lib/src/components/charts/lume-sparkline-chart/lume-sparkline-chart.stories.ts
@@ -1,4 +1,6 @@
 import { computed, toRaw } from 'vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
+
 import {
   actionEventHandlerTemplate,
   captureAction,
@@ -10,9 +12,7 @@ import DATASETS from '@/docs/storybook-data/sparkline-data';
 
 import LumeSparklineChart from './lume-sparkline-chart.vue';
 
-import { options as defaultOptions } from './defaults';
-
-export default {
+const meta: Meta<typeof LumeSparklineChart> = {
   title: 'Charts/Sparkline chart',
   component: LumeSparklineChart,
   argTypes: {
@@ -50,12 +50,15 @@ export default {
   },
   args: {
     ...withSizeArgs(300, 80),
-    options: defaultOptions,
   },
 };
 
-const Template = ({ args }) => {
-  return {
+export default meta;
+
+type Story = StoryObj<typeof LumeSparklineChart>;
+
+export const Basic: Story = {
+  render: ({ args }) => ({
     components: { LumeSparklineChart },
     setup() {
       const computedData = computed(() => {
@@ -66,33 +69,74 @@ const Template = ({ args }) => {
         return dataset;
       });
 
-      return { args, computedData };
+      return { args, computedData, captureAction };
     },
-    methods: { captureAction },
-    template: `
-        <div :style="{ width: args.width + 'px', height: args.height + 'px' }">
-            <lume-sparkline-chart v-bind="args" :data="computedData" ${actionEventHandlerTemplate} />
-        </div>
-    `,
-  };
+    template: `<div :style="{ width: args.width + 'px', height: args.height + 'px' }">
+        <lume-sparkline-chart v-bind="args" :data="computedData" ${actionEventHandlerTemplate} />
+    </div>`,
+  }),
+  args: {
+    ...DATASETS.Basic,
+  },
 };
 
-export const Basic = Template.bind({});
-Basic.args = {
-  ...DATASETS.Basic,
-};
+export const NegativeValues: Story = {
+  render: ({ args }) => ({
+    components: { LumeSparklineChart },
+    setup() {
+      const computedData = computed(() => {
+        const dataset = structuredClone(toRaw(args.data)); // Deep copy dataset array
+        if (args.color) dataset[0].color = COLOR_CLASS_MAP[args.color];
+        if (args.areaColor)
+          dataset[0].areaColor = COLOR_CLASS_MAP[args.areaColor];
+        return dataset;
+      });
 
-export const NegativeValues = Template.bind({});
-NegativeValues.args = {
-  ...DATASETS.NegativeValue,
+      return { args, computedData, captureAction };
+    },
+    template: `<div :style="{ width: args.width + 'px', height: args.height + 'px' }">
+        <lume-sparkline-chart v-bind="args" :data="computedData" ${actionEventHandlerTemplate} />
+    </div>`,
+  }),
+  args: {
+    ...DATASETS.NegativeValue,
+  },
 };
 
-export const NullValues = Template.bind({});
-NullValues.args = {
-  ...DATASETS.NullValues,
+export const NullValues: Story = {
+  render: ({ args }) => ({
+    components: { LumeSparklineChart },
+    setup() {
+      const computedData = computed(() => {
+        const dataset = structuredClone(toRaw(args.data)); // Deep copy dataset array
+        if (args.color) dataset[0].color = COLOR_CLASS_MAP[args.color];
+        if (args.areaColor)
+          dataset[0].areaColor = COLOR_CLASS_MAP[args.areaColor];
+        return dataset;
+      });
+
+      return { args, computedData, captureAction };
+    },
+    template: `<div :style="{ width: args.width + 'px', height: args.height + 'px' }">
+        <lume-sparkline-chart v-bind="args" :data="computedData" ${actionEventHandlerTemplate} />
+    </div>`,
+  }),
+  args: {
+    ...DATASETS.NullValues,
+  },
 };
 
-export const Empty = Template.bind({});
-Empty.args = {
-  ...DATASETS.Empty,
+export const Empty: Story = {
+  render: ({ args }) => ({
+    components: { LumeSparklineChart },
+    setup() {
+      return { args, captureAction };
+    },
+    template: `<div :style="{ width: args.width + 'px', height: args.height + 'px' }">
+        <lume-sparkline-chart v-bind="args"  ${actionEventHandlerTemplate} />
+    </div>`,
+  }),
+  args: {
+    ...DATASETS.Empty,
+  },
 };
diff --git a/packages/lib/src/components/core/lume-axis/lume-axis.stories.ts b/packages/lib/src/components/core/lume-axis/lume-axis.stories.ts
index 89b1aa65..57849453 100644
--- a/packages/lib/src/components/core/lume-axis/lume-axis.stories.ts
+++ b/packages/lib/src/components/core/lume-axis/lume-axis.stories.ts
@@ -1,7 +1,9 @@
-import { withSizeArgs, withSizeArgTypes } from '@/docs/storybook-helpers';
+import type { Meta, StoryObj } from '@storybook/vue3';
 import { computed } from 'vue';
 import { scaleBand, scaleLinear } from 'd3';
 
+import { withSizeArgs, withSizeArgTypes } from '@/docs/storybook-helpers';
+
 import LumeAxis from './lume-axis.vue';
 import { xOptions, yOptions } from './defaults';
 
@@ -10,7 +12,7 @@ const SCALES = {
   linear: scaleLinear().domain([0, 100]),
 };
 
-export default {
+const meta: Meta<typeof LumeAxis> = {
   title: 'Core/Axis',
   component: LumeAxis,
   argTypes: {
@@ -25,97 +27,123 @@ export default {
   },
 };
 
-const Template = ({ args }) => ({
-  components: { LumeAxis },
-  setup() {
-    const computedContainerSize = computed(() => ({
-      width: args.width,
-      height: args.height,
-    }));
-
-    const computedScale = computed(() =>
-      args.scale.range(
-        args.type === 'x' ? [0, args.width] : [args.height - 28, 0]
-      )
-    );
-
-    const transform = computed(
-      () =>
-        `translate(${args.type === 'x' ? 0 : 28}, ${
-          args.type === 'x' ? -28 : 14
-        })`
-    );
-
-    return { args, computedContainerSize, computedScale, transform };
+export default meta;
+
+type Story = StoryObj<typeof LumeAxis>;
+
+export const xAxis: Story = {
+  name: 'X Axis (band scale)',
+  render: ({ args }) => ({
+    components: { LumeAxis },
+    setup() {
+      const computedContainerSize = computed(() => ({
+        width: args.width,
+        height: args.height,
+      }));
+
+      const computedScale = computed(() =>
+        args.scale.range(
+          args.type === 'x' ? [0, args.width] : [args.height - 28, 0]
+        )
+      );
+
+      const transform = computed(
+        () =>
+          `translate(${args.type === 'x' ? 0 : 28}, ${
+            args.type === 'x' ? -28 : 14
+          })`
+      );
+
+      return { args, computedContainerSize, computedScale, transform };
+    },
+    template: `<svg :width="args.width" :height="args.height">
+    <g :transform="transform">
+      <lume-axis v-bind="args" :scale="computedScale" :container-size="computedContainerSize" />
+    </g>
+  </svg>`,
+  }),
+  args: {
+    scale: SCALES.band,
+    type: 'x',
+    options: { ...xOptions, gridLines: true },
   },
-  template: `
-    <svg :width="args.width" :height="args.height">
-      <g :transform="transform">
-        <lume-axis v-bind="args" :scale="computedScale" :container-size="computedContainerSize" />
-      </g>
-    </svg>
-  `,
-});
-
-export const xAxis = Template.bind({});
-xAxis.args = {
-  scale: SCALES.band,
-  type: 'x',
-  options: { ...xOptions, gridLines: true },
 };
-xAxis.storyName = 'X Axis (band scale)';
 
-export const yAxis = Template.bind({});
-yAxis.args = {
-  scale: SCALES.linear,
-  type: 'y',
-  options: yOptions,
-};
-yAxis.storyName = 'Y Axis (linear scale)';
-
-export const bothAxes = ({ args }) => ({
-  components: { LumeAxis },
-  setup() {
-    const computedContainerSize = computed(() => ({
-      width: args.width - 28,
-      height: args.height - 32,
-    }));
-
-    const computedXScale = computed(() =>
-      SCALES.band.range([0, args.width - 28])
-    );
-
-    const computedYScale = computed(() =>
-      SCALES.linear.range([args.height - 32, 0])
-    );
-
-    const transform = computed(() => `translate(28, 14)`);
-
-    return {
-      args,
-      computedContainerSize,
-      computedXScale,
-      computedYScale,
-      transform,
-    };
-  },
-  template: `
-    <svg :width="args.width" :height="args.height">
-      <g :transform="transform">
-        <lume-axis v-bind="args" type="x" :scale="computedXScale" :container-size="computedContainerSize" />
-        <lume-axis v-bind="args" type="y" :scale="computedYScale" :container-size="computedContainerSize" />
-      </g>
-    </svg>
-  `,
-});
-bothAxes.argTypes = {
-  ...withSizeArgTypes(),
-  options: {
-    control: 'object',
-    description: 'Axis options.',
+export const yAxis: Story = {
+  name: 'Y Axis (linear scale)',
+  render: ({ args }) => ({
+    components: { LumeAxis },
+    setup() {
+      const computedContainerSize = computed(() => ({
+        width: args.width,
+        height: args.height,
+      }));
+
+      const computedScale = computed(() =>
+        args.scale.range(
+          args.type === 'x' ? [0, args.width] : [args.height - 28, 0]
+        )
+      );
+
+      const transform = computed(
+        () =>
+          `translate(${args.type === 'x' ? 0 : 28}, ${
+            args.type === 'x' ? -28 : 14
+          })`
+      );
+
+      return { args, computedContainerSize, computedScale, transform };
+    },
+    template: `<svg :width="args.width" :height="args.height">
+    <g :transform="transform">
+      <lume-axis v-bind="args" :scale="computedScale" :container-size="computedContainerSize" />
+    </g>
+  </svg>`,
+  }),
+  args: {
+    scale: SCALES.linear,
+    type: 'y',
+    options: yOptions,
   },
 };
-bothAxes.args = {
-  options: { ...xOptions, gridLines: true },
-  ...withSizeArgs(540, 200),
+
+export const bothAxes: Story = {
+  name: 'Y Axis (linear scale)',
+  render: ({ args }) => ({
+    components: { LumeAxis },
+    setup() {
+      const computedContainerSize = computed(() => ({
+        width: args.width - 28,
+        height: args.height - 32,
+      }));
+
+      const computedXScale = computed(() =>
+        SCALES.band.range([0, args.width - 28])
+      );
+
+      const computedYScale = computed(() =>
+        SCALES.linear.range([args.height - 32, 0])
+      );
+
+      const transform = computed(() => `translate(28, 14)`);
+
+      return {
+        args,
+        computedContainerSize,
+        computedXScale,
+        computedYScale,
+        transform,
+      };
+    },
+    template: `<svg :width="args.width" :height="args.height">
+    <g :transform="transform">
+      <lume-axis v-bind="args" type="x" :scale="computedXScale" :container-size="computedContainerSize" />
+      <lume-axis v-bind="args" type="y" :scale="computedYScale" :container-size="computedContainerSize" />
+    </g>
+  </svg>`,
+  }),
+  args: {
+    ...withSizeArgs(540, 200),
+    options: { ...xOptions, gridLines: true },
+  },
 };
diff --git a/packages/lib/src/components/core/lume-bar/lume-bar.stories.ts b/packages/lib/src/components/core/lume-bar/lume-bar.stories.ts
index 589c2168..d7a9f6ae 100644
--- a/packages/lib/src/components/core/lume-bar/lume-bar.stories.ts
+++ b/packages/lib/src/components/core/lume-bar/lume-bar.stories.ts
@@ -1,13 +1,13 @@
 import { computed } from 'vue';
-import {
-  COLOR_CLASS_MAP,
-  withSizeArgs,
-  withSizeArgTypes,
-} from '@/docs/storybook-helpers';
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { withSizeArgs, withSizeArgTypes } from '@/docs/storybook-helpers';
 
 import LumeBar from './lume-bar.vue';
 
-export default {
+import { Colors } from '@/utils/constants';
+
+const meta: Meta<typeof LumeBar> = {
   title: 'Core/Bar',
   component: LumeBar,
   argTypes: {
@@ -16,36 +16,38 @@ export default {
     ...withSizeArgTypes(),
     color: {
       control: 'select',
-      options: Object.keys(COLOR_CLASS_MAP),
+      options: Object.keys(Colors),
       description: 'Bar color.',
     },
     isFaded: { control: 'boolean' },
     transition: { control: 'select', options: ['width', 'height', null] },
   },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LumeBar>;
+
+export const Basic: Story = {
+  render: ({ args }) => ({
+    components: { LumeBar },
+    setup() {
+      const computedFillClass = computed(
+        () => `lume-fill--` + Colors[args.color]
+      );
+
+      return { args, computedFillClass };
+    },
+    template: `<svg width="300" height="300">
+    <lume-bar v-bind="args" :class-list="computedFillClass" />
+  </svg>`,
+  }),
   args: {
     x: 100,
     y: 100,
     ...withSizeArgs(100, 200),
-    color: Object.keys(COLOR_CLASS_MAP)[0],
+    color: 'Skyblue',
     isFaded: false,
     transition: 'height',
   },
 };
-
-const Template = ({ args }) => ({
-  components: { LumeBar },
-  setup() {
-    const computedFillClass = computed(
-      () => `lume-fill--` + COLOR_CLASS_MAP[args.color]
-    );
-
-    return { args, computedFillClass };
-  },
-  template: `
-    <svg width="300" height="300">
-      <lume-bar v-bind="args" :class-list="computedFillClass" />
-    </svg>
-  `,
-});
-
-export const Basic = Template.bind({});
diff --git a/packages/lib/src/components/core/lume-chart-legend/lume-chart-legend.stories.ts b/packages/lib/src/components/core/lume-chart-legend/lume-chart-legend.stories.ts
index c655978e..9bd91a3c 100644
--- a/packages/lib/src/components/core/lume-chart-legend/lume-chart-legend.stories.ts
+++ b/packages/lib/src/components/core/lume-chart-legend/lume-chart-legend.stories.ts
@@ -1,4 +1,5 @@
 import { toRefs } from 'vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
 
 import DATASETS from '@/docs/storybook-data/base-data';
 
@@ -6,7 +7,7 @@ import LumeChartLegend from './lume-chart-legend.vue';
 
 import { useBase } from '../../../composables/base';
 
-export default {
+const meta: Meta<typeof LumeChartLegend> = {
   title: 'Core/Legend',
   component: LumeChartLegend,
   argTypes: {
@@ -18,24 +19,36 @@ export default {
   args: {},
 };
 
-const Template = ({ args }) => ({
-  components: { LumeChartLegend },
-  setup() {
-    const { data, labels } = toRefs(args);
-    const { internalData } = useBase(data, labels);
-    return { args, internalData };
+export default meta;
+
+type Story = StoryObj<typeof LumeChartLegend>;
+
+export const Basic: Story = {
+  render: ({ args }) => ({
+    components: { LumeChartLegend },
+    setup() {
+      const { data, labels } = toRefs(args);
+      const { internalData } = useBase(data, labels);
+      return { args, internalData };
+    },
+    template: `<lume-chart-legend v-bind="args" :data="internalData" />`,
+  }),
+  args: {
+    data: DATASETS.Single.data,
   },
-  template: `
-    <lume-chart-legend v-bind="args" :data="internalData" />
-  `,
-});
-
-export const Basic = Template.bind({});
-Basic.args = {
-  data: DATASETS.Single.data,
 };
 
-export const MultipleDatasets = Template.bind({});
-MultipleDatasets.args = {
-  data: DATASETS.AdoptedAnimals.data,
+export const MultipleDatasets: Story = {
+  render: ({ args }) => ({
+    components: { LumeChartLegend },
+    setup() {
+      const { data, labels } = toRefs(args);
+      const { internalData } = useBase(data, labels);
+      return { args, internalData };
+    },
+    template: `<lume-chart-legend v-bind="args" :data="internalData" />`,
+  }),
+  args: {
+    data: DATASETS.AdoptedAnimals.data,
+  },
 };
diff --git a/packages/lib/src/components/core/lume-line/lume-line.stories.ts b/packages/lib/src/components/core/lume-line/lume-line.stories.ts
index f9e7c16d..6dc1e998 100644
--- a/packages/lib/src/components/core/lume-line/lume-line.stories.ts
+++ b/packages/lib/src/components/core/lume-line/lume-line.stories.ts
@@ -1,10 +1,11 @@
 import { computed } from 'vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
 
 import { Colors } from '@/utils/constants';
 
 import LumeLine from './lume-line.vue';
 
-export default {
+const meta: Meta<typeof LumeLine> = {
   title: 'Core/Line',
   component: LumeLine,
   argTypes: {
@@ -18,34 +19,38 @@ export default {
     x2: { control: { type: 'number', step: 10 } },
     y1: { control: { type: 'number', step: 10 } },
     y2: { control: { type: 'number', step: 10 } },
+    dashed: { control: 'boolean' },
     animationDelay: { control: { type: 'number', step: 0.1 } },
     animationDuration: { control: 'number' },
   },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LumeLine>;
+
+export const Basic: Story = {
+  render: ({ args }) => ({
+    components: { LumeLine },
+    setup() {
+      const computedColor = computed(() => Colors[args.color]);
+      const pathDefinition = computed(
+        () => `M${args.x1},${args.y1} L${args.x2},${args.y2}`
+      );
+
+      return { args, computedColor, pathDefinition };
+    },
+    template: `<svg width="300" height="300">
+    <lume-line v-bind="args" :color="computedColor" :path-definition="pathDefinition" />
+  </svg>`,
+  }),
   args: {
     width: 2,
     color: 'Royalblue',
     x1: 50,
     x2: 250,
-    y1: 50,
-    y2: 250,
+    y1: 250,
+    y2: 50,
+    dashed: false,
   },
 };
-
-const Template = ({ args }) => ({
-  components: { LumeLine },
-  setup() {
-    const computedColor = computed(() => Colors[args.color]);
-    const pathDefinition = computed(
-      () => `M${args.x1},${args.y1} L${args.x2},${args.y2}`
-    );
-
-    return { args, computedColor, pathDefinition };
-  },
-  template: `
-    <svg width="300" height="300">
-      <lume-line v-bind="args" :color="computedColor" :path-definition="pathDefinition" />
-    </svg>
-  `,
-});
-
-export const Basic = Template.bind({});
diff --git a/packages/lib/src/components/core/lume-point/lume-point.stories.ts b/packages/lib/src/components/core/lume-point/lume-point.stories.ts
index dc2d758e..cbdc8466 100644
--- a/packages/lib/src/components/core/lume-point/lume-point.stories.ts
+++ b/packages/lib/src/components/core/lume-point/lume-point.stories.ts
@@ -1,10 +1,11 @@
 import { computed } from 'vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
 
 import { Colors } from '@/utils/constants';
 
 import LumePoint from './lume-point.vue';
 
-export default {
+const meta: Meta<typeof LumePoint> = {
   title: 'Core/Point',
   component: LumePoint,
   argTypes: {
@@ -17,6 +18,24 @@ export default {
     },
     radius: { control: 'number' },
   },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LumePoint>;
+
+export const Basic: Story = {
+  render: ({ args }) => ({
+    components: { LumePoint },
+    setup() {
+      const computedColor = computed(() => Colors[args.color]);
+      return { args, computedColor };
+    },
+    template: `<svg width="300" height="300">
+    <lume-point v-bind="args" :color="computedColor" active />
+  </svg>`,
+  }),
+
   args: {
     x: 150,
     y: 150,
@@ -24,19 +43,3 @@ export default {
     radius: 4,
   },
 };
-
-const Template = ({ args }) => ({
-  components: { LumePoint },
-  setup() {
-    const computedColor = computed(() => Colors[args.color]);
-
-    return { args, computedColor };
-  },
-  template: `
-    <svg width="300" height="300">
-      <lume-point v-bind="args" :color="computedColor" active />
-    </svg>
-  `,
-});
-
-export const Basic = Template.bind({});
diff --git a/packages/lib/src/docs/storybook-data/alluvial-data.ts b/packages/lib/src/docs/storybook-data/alluvial-data.ts
index 1b872008..b40792d8 100644
--- a/packages/lib/src/docs/storybook-data/alluvial-data.ts
+++ b/packages/lib/src/docs/storybook-data/alluvial-data.ts
@@ -53,7 +53,7 @@ const DATASETS = {
           },
           {
             label: 'Cats',
-            color: 'skyblue',
+            color: 'royalblue',
             value: 'cats',
             targets: [
               { node: 'medicalCare', value: 50 },
@@ -65,7 +65,7 @@ const DATASETS = {
           },
           {
             label: 'Dogs',
-            color: 'skyblue',
+            color: 'royalblue',
             value: 'dogs',
             targets: [
               { node: 'medicalCare', value: 100 },
@@ -78,7 +78,7 @@ const DATASETS = {
           {
             label: 'Other pets',
             value: 'otherPets',
-            color: 'skyblue',
+            color: 'grey',
             targets: [
               { node: 'medicalCare', value: 50 },
               { node: 'foodAndTreats', value: 40 },
@@ -90,27 +90,27 @@ const DATASETS = {
           {
             label: 'Medical care',
             value: 'medicalCare',
-            color: 'skyblue',
+            color: 'red',
           },
           {
             label: 'Food and treats',
             value: 'foodAndTreats',
-            color: 'skyblue',
+            color: 'violet',
           },
           {
             label: 'Litter',
             value: 'litter',
-            color: 'skyblue',
+            color: 'darkteal',
           },
           {
             label: 'Toys',
             value: 'toys',
-            color: 'skyblue',
+            color: 'gold',
           },
           {
             label: 'Misc',
             value: 'misc',
-            color: 'skyblue',
+            color: 'grey',
           },
         ],
       },