Chart

Chart component is a visual to convey complex images to users.

Basic usage

Source code

<script setup>
  import AcvChart from '@/components/chart/chart.vue';

  const data = {
    labels: [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July'
    ],
    datasets: [{
      label: 'My First Dataset',
      data: [65, 59, 80, 81, 56, 55, 40],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 159, 64, 0.2)',
        'rgba(255, 205, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(201, 203, 207, 0.2)'
      ],
      borderColor: [
        'rgb(255, 99, 132)',
        'rgb(255, 159, 64)',
        'rgb(255, 205, 86)',
        'rgb(75, 192, 192)',
        'rgb(54, 162, 235)',
        'rgb(153, 102, 255)',
        'rgb(201, 203, 207)'
      ],
      borderWidth: 1
    }]
  };

  const options = {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  };
</script>

<template>
  <AcvChart
    type="bar"
    dataset-id-key="test"
    :data="data"
    :options="options"
  />
</template>

Bubble chart

Donut chart

Area chart

Line chart

Mixed chart

Stacked area chart

Data is loading...

Default

Data is loading...

Change data

Data is loading...

Acronis branding colors

Pie chart

Polar chart

Radar chart

Scatter chart

Accessibility

- Use the `aria-label` attribute to provide a label for the chart.
- Use the `aria-describedby` attribute to provide a description for the chart.
- Use the `aria-labelledby` attribute to provide a title for the chart.
- If the data in a chart, graph or map is crucial to the content of a Web page, then you must provide a text description of the image.
- In some cases, a numeric table replicating the chart data could provide additional accessibility.
- If the chart is interactive, ensure that it can be operated with a keyboard.
- Supplement color-coding of charts with texture, text in graphs or different shades of color to improve accessibility for colorblind users.
- Charts should be readable in black and white.
- Don’t convert tables of data into images—use an actual data table instead.
- Check the contrast of the text color against the background with a color contrast checker
- Use clear labels and descriptions for the chart.

Keyboard support

- Use the `Tab` key to navigate through the chart.
- Use the `Arrow` keys to navigate through the chart.
- Use the `Space` key to select a point on the chart.
- Use the `Enter` key to select a point on the chart.

Best practices

- [Creating complex images](https://www.w3.org/WAI/tutorials/images/complex/)
- [Accessible charts](https://accessibility.huit.harvard.edu/data-viz-charts-graphs)

Related components

• Bar Chart
• Pie Chart
• Line Chart
• Stacked Area Chart
• Widget wrapper

Props

Prop name	Description	Type	Values	Default
type	Type of the Chart.Js chart	ChartType	-	'bar'
data	The data object that is passed into the Chart.js chart	ChartData	-
options	The options object that is passed into the Chart.js chart	ChartOptions	-	{}
plugins	Plugins for the chart	Array	-	[]
updateMode	Update mode for the chart	UpdateMode	'resize', 'reset', 'none', 'hide', 'show', 'default', 'active'	undefined
datasetIdKey	Key name to identify dataset	string	-	'label'

Events

Event name	Properties	Description
close	payload string - The first argument	Triggered when the component is closed

Slots

Name	Description	Bindings
default