Vue Chart Component - Bitrix24 UI

Usage 2.15+

The Chart component is built on top of TanStack Charts and renders an SVG on the server.

TanStack Charts is an optional peer dependency, install it first:

pnpm add @tanstack/charts

yarn add @tanstack/charts

npm install @tanstack/charts

bun add @tanstack/charts

Use the data prop to pass an array of objects, the index prop to set the key used for the x axis and the categories prop to set the series, each with the key of its values and an optional label and color.

<script setup lang="ts">
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

You can also pass categories as strings, like ['desktop', 'mobile'], when they read well as names.

Use the aria-label prop to name the chart for assistive technologies.

Type

Use the type prop to change the type of chart. Defaults to line.

With donut, each row of data is a slice. The index sets its label and the first key of categories its value.

type

<script setup lang="ts">
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    type="donut"
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    type="donut"
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

Stacked

Use the stacked prop to stack the series on top of each other.

This prop only works when type is area or bar.

type

stacked

<script setup lang="ts">
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    type="bar"
    stacked
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    type="bar"
    stacked
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

Curve

Use the curve prop to change the shape of the line between values. Defaults to linear.

This prop only works when type is line or area.

type

curve

<script setup lang="ts">
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    type="line"
    curve="monotone"
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    type="line"
    curve="monotone"
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

Colors

Use the colors prop to set the color of each series with air-* colors (air-primary, air-primary-success, air-primary-alert, air-primary-warning, air-primary-copilot, air-secondary-no-accent) or any CSS color.

The colors follow the categories order, or the data order with donut. A color set on a category takes precedence. When there are more series than colors, they repeat as lighter tints.

<script setup lang="ts">
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    :colors="{
      '0': 'air-primary-success',
      '1': '#8b5cf6'
    }"
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    :colors="{
      '0': 'air-primary-success',
      '1': '#8b5cf6'
    }"
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

The colors default to the --b24ui-chart-* CSS variables, which you can customize in your main.css file.

Points

Use the points prop to draw a dot at each value.

This prop only works when type is line.

points

<script setup lang="ts">
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    points
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    points
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

Grid

Use the grid prop to toggle the horizontal grid lines. Defaults to true.

grid

<script setup lang="ts">
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    :grid="false"
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    :grid="false"
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

Axis

Use the x-axis and y-axis props to toggle each axis. Both default to true.

xAxis

yAxis

<script setup lang="ts">
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    :x-axis="false"
    :y-axis="false"
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    :x-axis="false"
    :y-axis="false"
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

Axis labels

Use the x-label and y-label props to display a title along each axis.

xLabel

yLabel

<script setup lang="ts">
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    x-label="Month"
    y-label="Visitors"
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    x-label="Month"
    y-label="Visitors"
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

Legend

Use the legend prop to toggle the legend.

The legend is displayed by default when there is more than one category, or more than one slice with donut.

legend

<script setup lang="ts">
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

Use the tooltip prop to customize or hide the Tooltip displayed on the focused values. Defaults to true.

You can also use the #tooltip slot to replace its content.

tooltip

<script setup lang="ts">
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    :tooltip="false"
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    :tooltip="false"
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

Thickness

Use the thickness prop to set the width of the ring in pixels. Defaults to 24.

This prop only works when type is donut.

type

thickness

<script setup lang="ts">
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    type="donut"
    :thickness="12"
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    type="donut"
    :thickness="12"
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

Size

Use the height prop to set the height of the chart in pixels. Defaults to 300.

The chart follows the width of its container. Use the aspect-ratio prop to derive the height from the width, or the width prop to set a fixed width.

With a fixed height, the chart fades in once its container is measured. With aspect-ratio, the chart rendered on the server is displayed right away.

height

<script setup lang="ts">
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    :height="200"
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ChartData } from '@bitrix24/b24ui-nuxt'

const data = ref<ChartData[]>([
  {
    month: 'January',
    desktop: 186,
    mobile: 80
  },
  {
    month: 'February',
    desktop: 305,
    mobile: 200
  },
  {
    month: 'March',
    desktop: 237,
    mobile: 120
  },
  {
    month: 'April',
    desktop: 73,
    mobile: 190
  },
  {
    month: 'May',
    desktop: 209,
    mobile: 130
  },
  {
    month: 'June',
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <B24Chart
    :height="200"
    :data="data"
    index="month"
    :categories="{
      '0': {
        key: 'desktop',
        label: 'Desktop'
      },
      '1': {
        key: 'mobile',
        label: 'Mobile'
      }
    }"
  />
</template>

Examples

With formatted values

Use the format prop to format the values on the y axis and in the tooltip.

<script setup lang="ts">
const data = [
  { month: 'January', revenue: 18600 },
  { month: 'February', revenue: 30500 },
  { month: 'March', revenue: 23700 },
  { month: 'April', revenue: 27300 },
  { month: 'May', revenue: 20900 },
  { month: 'June', revenue: 31400 }
]

const currency = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', notation: 'compact' })
</script>

<template>
  <B24Chart
    type="bar"
    :data="data"
    index="month"
    :categories="[{ key: 'revenue', label: 'Revenue' }]"
    :format="value => currency.format(value)"
    aria-label="Monthly revenue"
  />
</template>

With a chart definition

Use the definition prop to pass a complete TanStack Charts definition when the other props are not enough.

A definition from the TanStack Charts examples renders as is, with the tooltip and the responsive sizing applied.

<script setup lang="ts">
import { defineChart, lineY, ruleY } from '@tanstack/charts'
import { scaleLinear } from '@tanstack/charts/scales/linear'
import { scalePoint } from '@tanstack/charts/scales/point'

const data = [
  { month: 'January', revenue: 186 },
  { month: 'February', revenue: 305 },
  { month: 'March', revenue: 237 },
  { month: 'April', revenue: 273 },
  { month: 'May', revenue: 209 },
  { month: 'June', revenue: 314 }
]

const definition = defineChart({
  marks: [
    ruleY([250], { stroke: 'var(--ui-color-accent-main-alert)', strokeDasharray: '4 4' }),
    lineY(data, { x: 'month', y: 'revenue', stroke: 'var(--ui-color-accent-main-primary)', strokeWidth: 2, points: true })
  ],
  scales: {
    x: { scale: () => scalePoint<string>().padding(0.2) },
    y: { scale: scaleLinear, nice: true, grid: true, axis: { label: 'Revenue' } }
  }
})
</script>

<template>
  <B24Chart :definition="definition" aria-label="Revenue against target" />
</template>

Series without an explicit color use the --b24ui-chart-* CSS variables. Colors set in the definition are kept.

When the definition brings its own tooltip, it is displayed in place of the tooltip prop.

Examples importing d3-* packages need them installed in your project.

With center slot

Use the #center slot to display content in the middle of a donut chart.

<script setup lang="ts">
const data = [
  { browser: 'Chrome', visitors: 275 },
  { browser: 'Safari', visitors: 200 },
  { browser: 'Firefox', visitors: 187 },
  { browser: 'Edge', visitors: 173 }
]
</script>

<template>
  <B24Chart
    type="donut"
    :data="data"
    index="browser"
    :categories="['visitors']"
    legend
    aria-label="Visitors by browser"
  >
    <template #center>
      <span class="text-(length:--ui-font-size-4xl) font-(--ui-font-weight-semi-bold) text-legend">835</span>
      <span class="text-(length:--ui-font-size-xs) text-description">Visitors</span>
    </template>
  </B24Chart>
</template>

Use the #tooltip slot to replace the tooltip content. It receives the title, the rows with their label, value and color, and the focused points.

<script setup lang="ts">
const data = [
  { month: 'January', revenue: 18600, expenses: 12400 },
  { month: 'February', revenue: 30500, expenses: 21800 },
  { month: 'March', revenue: 23700, expenses: 25100 },
  { month: 'April', revenue: 27300, expenses: 19600 },
  { month: 'May', revenue: 20900, expenses: 22300 },
  { month: 'June', revenue: 31400, expenses: 20700 }
]

const currency = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 })

function profit(month?: string) {
  const row = data.find(row => row.month === month)

  return row ? row.revenue - row.expenses : 0
}
</script>

<template>
  <B24Chart
    type="bar"
    :data="data"
    index="month"
    :categories="[{ key: 'revenue', label: 'Revenue', color: 'air-primary-success' }, { key: 'expenses', label: 'Expenses', color: 'air-primary-alert' }]"
    :format="value => currency.format(value)"
    aria-label="Revenue and expenses"
  >
    <template #tooltip="{ title, rows }">
      <p class="font-(--ui-font-weight-medium)">
        {{ title }}
      </p>

      <div v-for="row in rows" :key="row.label" class="flex items-center gap-2">
        <span class="size-2 rounded-full" :style="{ backgroundColor: row.color }" />
        <span class="opacity-75">{{ row.label }}</span>
        <span class="ms-auto ps-4 tabular-nums">{{ row.value }}</span>
      </div>

      <B24Separator class="my-1" />

      <div class="flex items-center gap-2">
        <span class="opacity-75">Profit</span>
        <B24Badge
          :color="profit(title) >= 0 ? 'air-primary-success' : 'air-primary-alert'"
          :label="currency.format(profit(title))"
          size="sm"
          class="ms-auto tabular-nums"
        />
      </div>
    </template>
  </B24Chart>
</template>

API

Props

Prop	Default	Type
`type`	`'line'`	`"line" \| "area" \| "bar" \| "donut"` The type of chart to render.
`data`		`T[]` The rows to plot, one object per x value, or per slice with `donut`.
`index`		`keyof T & string` The key of each row used for the x axis, or for the slice labels with `donut`.
`categories`		`((keyof T & string) \| ChartCategory<T>)[]` The keys of each row plotted as series on the y axis, or objects to set their `label` and `color`. With `donut`, the first one sets the slice values.
`colors`		`string[]` The series colors, in `categories` order, or in `data` order with `donut`. Accepts `air-*` colors or any CSS color. When there are more series than colors, the colors repeat as lighter tints. Defaults to the `--b24ui-chart-1` to `--b24ui-chart-6` CSS variables.
`stacked`		`boolean` Stack the series on top of each other. Only applies to `area` and `bar`.
`curve`	`'linear'`	`"linear" \| "monotone" \| "step"` The shape of the line between values. Only applies to `line` and `area`.
`points`	`false`	`boolean` Draw a dot at each value. Only applies to `line`.
`grid`	`true`	`boolean` Display horizontal grid lines.
`xAxis`	`true`	`boolean` Display the x axis.
`yAxis`	`true`	`boolean` Display the y axis.
`xLabel`		`string` A title displayed along the x axis.
`yLabel`		`string` A title displayed along the y axis.
`legend`		`boolean` Display a legend. Defaults to `true` when there is more than one category, or more than one slice with `donut`.
`format`		`(value: number): string` Format the values on the y axis and in the tooltip.
`tooltip`	`true`	`boolean \| TooltipProps` Display a tooltip on the focused values. `{ content: { side: 'top', sideOffset: 12 } }`
`thickness`	`24`	`number` The width of the ring in pixels. Only applies to `donut`.
`height`		`number` The height of the chart in pixels. Defaults to `300` unless `aspectRatio` is set.
`aspectRatio`		`number` The width over height ratio of the chart, used when `height` is not set.
`width`		`number` A fixed width in pixels. The chart follows its container by default.
`initialWidth`	`640`	`number` The width used on the server and before the container is measured.
`ariaLabel`		`string` The accessible name of the chart. Defaults to the categories, set it when using `definition`.
`ariaDescription`		`string` A longer description of the chart for assistive technologies.
`definition`		`Omit<StaticChartDefinition<any, any, any, "dom">, "tooltip"> & { tooltip?: false \| ChartTooltipInput<any, any, any, "dom"> \| undefined; } \| Omit<ResponsiveChartDefinition<any, any, any, "dom">, "tooltip"> & { tooltip?: false \| ChartTooltipInput<any, any, any, "dom"> \| undefined; }` A complete TanStack Charts definition. Takes precedence over `data`, `index` and `categories`. When it has its own `tooltip`, that one is used in place of the `tooltip` prop.
`b24ui`		`{ root?: SlotClass; base?: SlotClass; tooltip?: SlotClass; tooltipTitle?: SlotClass; tooltipRow?: SlotClass; tooltipIndicator?: SlotClass; tooltipLabel?: SlotClass; tooltipValue?: SlotClass; center?: SlotClass; }`

Slots

Slot	Type
`tooltip`	`{ title?: string \| undefined; rows: ChartTooltipRow[]; points: ChartPoint<any, ChartValue, ChartValue>[]; primaryPoint: ChartPoint<any, ChartValue, ChartValue>; }`
`center`	`{}`

Emits

Event	Type
`select`	`[point: ChartPoint<any, ChartValue, ChartValue> \| null]`
`focusChange`	`[point: ChartPoint<any, ChartValue, ChartValue> \| null]`
`focusGroupChange`	`[points: readonly ChartPoint<any, ChartValue, ChartValue>[]]`

Theme

https://github.com/bitrix24/b24ui/tree/main/src/theme/chart.ts

export default {
  slots: {
    root: 'relative w-full text-(length:--ui-font-size-xs) text-muted **:data-reka-popper-content-wrapper:pointer-events-none [--ts-chart-tooltip-background:var(--ui-color-bg-content-inapp)] [--ts-chart-tooltip-color:var(--ui-color-base-8)] [--ts-chart-tooltip-border:1px_solid_var(--ui-color-bg-content-inapp)] [--ts-chart-tooltip-border-radius:var(--ui-border-radius-md)] [--ts-chart-tooltip-shadow:var(--popup-window-box-shadow)] [--ts-chart-tooltip-padding:6px_10px] [--ts-chart-tooltip-font:inherit]',
    base: 'opacity-0 in-data-measured:opacity-100 transition-opacity duration-150 [&_.ts-chart]:rounded-(--ui-border-radius-xs) [&_.ts-chart]:outline-0 [&_.ts-chart]:outline-(--ui-color-design-outline-focused-stroke) [&_.ts-chart:focus-visible]:outline-2',
    tooltip: 'flex-col items-stretch justify-start gap-[4px] h-auto min-h-0 min-w-32 py-[6px] px-[10px] pointer-events-none',
    tooltipTitle: 'font-(--ui-font-weight-medium)',
    tooltipRow: 'flex items-center gap-[6px] opacity-75 data-[active=true]:opacity-100',
    tooltipIndicator: 'size-2 shrink-0 rounded-full',
    tooltipLabel: 'truncate',
    tooltipValue: 'ms-auto ps-4 font-(--ui-font-weight-medium) tabular-nums',
    center: 'absolute inset-0 flex flex-col items-center justify-center pointer-events-none opacity-0 in-data-measured:opacity-100 transition-opacity duration-150'
  },
  variants: {
    type: {
      line: '',
      area: '',
      bar: '',
      donut: ''
    }
  }
}

Changelog

Accordion

This is a stacked set of collapsible panels

DescriptionList

For instances requiring the conversion of a table row into its own table to enhance page completeness.

Chart New

Usage 2.15+

Data

Type

Stacked

Curve

Colors

Points

Grid

Axis

Axis labels

Legend

Tooltip

Thickness

Size

Examples

With formatted values

With a chart definition

With center slot

With tooltip slot

API

Props

Slots

Emits

Theme

Changelog