Chart

Data visualization.

Basic

Use b-chart with chart-type or use specific chart such as b-bar-chart.

Chart with type

Bar Chart

---

<template>
  <h3>Chart with type</h3>
  <b-chart
    chart-type="bar"
    :chart-data="chartData"
    :chart-options="chartOptions"
    :height="200"
  />

  <h3 class="mt-4">Bar Chart</h3>
  <b-bar-chart
    :chart-data="chartData"
    :chart-options="chartOptions"
    :height="200"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { ChartOptions } from 'chart.js'

const chartData = ref({
  labels: ['Spring', 'Summer', 'Fall', 'Winter'],
  datasets: [
    {
      label: 'Dog',
      data: [40, 20, 12, 25],
    },
    {
      label: 'Cat',
      data: [12, 39, 10, 40],
    },
    {
      label: 'Others',
      data: [22, 12, 30, 8],
    },
  ],
})

const chartOptions: ChartOptions = {}
</script>

Bar chart

Default

Horizontal

Stacked

Horizontal Stacked

Gradient

Gradient Stacked

---

<template>
  <h3>Default</h3>
  <b-bar-chart :chart-data="chartData" :chart-options="defaultChartOptions" />

  <h3 class="mt-4">Horizontal</h3>
  <b-bar-chart
    :chart-data="chartData"
    :chart-options="chartHorizontalOptions"
  />

  <h3 class="mt-4">Stacked</h3>
  <b-bar-chart :chart-data="chartData" :chart-options="chartStackedOptions" />

  <h3 class="mt-4">Horizontal Stacked</h3>
  <b-bar-chart :chart-data="chartData" :chart-options="chartHStackedOptions" />

  <h3 class="mt-4">Gradient</h3>
  <b-bar-chart :chart-data="chartData" :chart-options="chartGradientOptions" />

  <h3 class="mt-4">Gradient Stacked</h3>
  <b-bar-chart
    :chart-data="chartData"
    :chart-options="chartGradientStackedOptions"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ChartUtils } from 'bigin-ui'
import type { ChartOptions } from 'chart.js'

const chartData = ref({
  labels: ['Spring', 'Summer', 'Fall', 'Winter'],
  datasets: [
    {
      label: 'Dog',
      data: [40, 20, 12, 25],
    },
    {
      label: 'Cat',
      data: [12, 39, 10, 40],
    },
    {
      label: 'Others',
      data: [22, 12, 30, 8],
    },
  ],
})

const defaultChartOptions: ChartOptions = {}

const chartHorizontalOptions = {
  indexAxis: 'y',
}

const chartStackedOptions = {
  barPercentage: 0.5,
  elements: {
    bar: {
      borderSkipped: 'middle',
    },
  },
  scales: {
    x: {
      stacked: true,
    },
    y: {
      stacked: true,
    },
  },
}

const chartHStackedOptions = {
  indexAxis: 'y',
  barPercentage: 0.5,
  scales: {
    x: {
      stacked: true,
    },
    y: {
      stacked: true,
    },
  },
}

const chartGradientOptions = {
  elements: {
    bar: {
      backgroundColor: ChartUtils.gradientColors,
    },
  },
}

const chartGradientStackedOptions = {
  barPercentage: 0.3,
  elements: {
    bar: {
      backgroundColor: ChartUtils.gradientColors,
    },
  },
  scales: {
    x: {
      stacked: true,
    },
    y: {
      stacked: true,
    },
  },
}
</script>

Line chart

Default

No tension

No points

Solid background

---

<template>
  <h3>Default</h3>
  <b-line-chart :chart-data="chartData" :chart-options="chartDefaultOptions" />

  <h3 class="mt-4">No tension</h3>
  <b-line-chart
    :chart-data="chartData"
    :chart-options="chartNoTensionOptions"
  />

  <h3 class="mt-4">No points</h3>
  <b-line-chart :chart-data="chartData" :chart-options="chartNoPointsOptions" />

  <h3 class="mt-4">Solid background</h3>
  <b-line-chart
    :chart-data="chartData"
    :chart-options="chartSolidBackgroundOptions"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ChartUtils } from 'bigin-ui'

const chartData = ref({
  labels: ['Spring', 'Summer', 'Fall', 'Winter'],
  datasets: [
    {
      label: 'Dog',
      data: [40, 20, 12, 25],
    },
    {
      label: 'Cat',
      data: [12, 39, 10, 40],
    },
    {
      label: 'Others',
      data: [22, 12, 30, 8],
    },
  ],
})

const chartDefaultOptions = {
  scales: {
    y: {
      grid: {
        display: false,
      },
    },
  },
}

const chartNoTensionOptions = {
  elements: {
    line: {
      tension: 0,
    },
  },
  scales: {
    y: {
      grid: {
        display: false,
      },
    },
  },
}

const chartNoPointsOptions = {
  elements: {
    point: {
      radius: 0,
    },
  },
  scales: {
    y: {
      grid: {
        display: false,
      },
    },
  },
}

const chartSolidBackgroundOptions = {
  elements: {
    line: {
      backgroundColor: ChartUtils.opaqueColors,
    },
  },
  scales: {
    y: {
      grid: {
        display: false,
      },
    },
  },
}
</script>

Bubble chart

---

<template>
  <b-bubble-chart :chart-data="chartData" :chart-options="chartOptions" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const chartData = ref({
  datasets: [
    {
      label: 'Orange',
      data: [
        {
          x: 20,
          y: 25,
          r: 5,
        },
        {
          x: 40,
          y: 10,
          r: 10,
        },
        {
          x: 30,
          y: 22,
          r: 30,
        },
      ],
    },
    {
      label: 'Banana',
      data: [
        {
          x: 10,
          y: 30,
          r: 15,
        },
        {
          x: 20,
          y: 20,
          r: 10,
        },
        {
          x: 15,
          y: 8,
          r: 30,
        },
      ],
    },
  ],
})

const chartOptions = {}
</script>

Donut chart

Default

Rotation

Gradient

---

<template>
  <h3>Default</h3>
  <b-donut-chart :chart-data="chartData" :chart-options="chartDefaultOptions" />

  <h3 class="mt-4">Rotation</h3>
  <b-donut-chart
    :chart-data="chartData"
    :chart-options="chartRotationOptions"
  />

  <h3 class="mt-4">Gradient</h3>
  <b-donut-chart
    :chart-data="chartData"
    :chart-options="chartGradientOptions"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ChartUtils } from 'bigin-ui'

const chartData = ref({
  labels: ['East', 'West', 'South', 'North'],
  datasets: [
    {
      data: [40, 20, 80, 10],
    },
  ],
})

const chartDefaultOptions = {}

const chartRotationOptions = {
  rotation: 45,
}

const chartGradientOptions = {
  elements: {
    arc: {
      backgroundColor: ChartUtils.radialGradientColors,
    },
  },
}
</script>

Pie chart

Default

Gradient

---

<template>
  <h3>Default</h3>
  <b-pie-chart :chart-data="chartData" :chart-options="chartDefaultOptions" />

  <h3 class="mt-4">Gradient</h3>
  <b-pie-chart :chart-data="chartData" :chart-options="chartGradientOptions" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ChartUtils } from 'bigin-ui'
import type { ChartOptions } from 'chart.js'

const chartData = ref({
  labels: ['East', 'West', 'South', 'North'],
  datasets: [
    {
      data: [40, 20, 80, 10],
    },
  ],
})

const chartDefaultOptions: ChartOptions<'pie'> = {}
const chartGradientOptions: ChartOptions<'pie'> = {
  elements: {
    arc: {
      backgroundColor: ChartUtils.radialGradientColors,
    },
  },
}
</script>

Polar area chart

---

<template>
  <b-polar-area-chart :chart-data="chartData" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const chartData = ref({
  labels: ['Eating', 'Drinking', 'Sleeping', 'Designing'],
  datasets: [
    {
      label: 'One',
      data: [0, 22, 0, 0],
    },
    {
      label: 'Two',
      data: [28, 0, 0, 0],
    },
    {
      label: 'Three',
      data: [0, 0, 36, 0],
    },
    {
      label: 'Four',
      data: [0, 0, 0, 18],
    },
  ],
})
</script>

Radar chart

---

<template>
  <b-radar-chart :chart-data="chartData" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const chartData = ref({
  labels: [
    'Eating',
    'Drinking',
    'Sleeping',
    'Designing',
    'Coding',
    'Cycling',
    'Running',
  ],
  datasets: [
    {
      label: 'Orange',
      data: [65, 59, 90, 81, 56, 55, 40],
    },
    {
      label: 'Banana',
      data: [28, 48, 40, 19, 96, 27, 100],
    },
  ],
})
</script>

Scatter chart

---

<template>
  <b-scatter-chart :chart-data="chartData" :chart-options="chartOptions" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const chartData = ref({
  datasets: [
    {
      label: 'Orange',
      data: [
        {
          x: 20,
          y: 25,
        },
        {
          x: 40,
          y: 10,
        },
        {
          x: 30,
          y: 22,
        },
      ],
    },
    {
      label: 'Banana',
      data: [
        {
          x: 10,
          y: 30,
        },
        {
          x: 20,
          y: 20,
        },
        {
          x: 15,
          y: 8,
        },
      ],
    },
  ],
})

const chartOptions = {
  scales: {
    x: {
      grid: {
        display: false,
      },
    },
  },
}
</script>

Custom chart

import { createTypedChart } from 'vue-chartjs'
import { LineController } from 'chart.js'

// The first argument is the chart-id, the second the chart type, third is the custom controller
const CustomLine = createTypedChart('custom-line', 'line', LineController)

Chart Attributes

Attribute	Description	Type	Accepted Values	Default
chart-data	Object with Chart data	Object	Ref	—
chart-options	Object with Chart options	Object	Ref	—
dataset-id-key	Index key in dataset	String	—	'label'
width	chart width, will ignore if options.responsive = true (default)	Number	—	400
height	chart height, will ignore if options.responsive = true (default)	Number	—	400
plugins	Array with Chart plugins	Array	Ref	—

Chart Events

Event Name	Description	Parameters
chart:rendered	if the chart object instance rendered	—
chart:destroyed	if the chart object instance removed	—
chart:updated	if the update handler performs an update instead of a re-render	—
labels:updated	if new labels were set	—

Chart Methods

Method	Description	Parameters
createTypedChart	Generate a custom chart	(chartId: string, chartType: string, chartController: ChartController)