Chart - Bar Chart

Storybook

Example

<vega-bar-chart></vega-bar-chart>
const weeklyData = [
  { x: 'Mon', y: 1167 },
  { x: 'Tue', y: 1492 },
  { x: 'Wed', y: 1782 },
  { x: 'Thu', y: 1253 },
  { x: 'Fri', y: 1702 },
  { x: 'Sat', y: 1288 },
  { x: 'Sun', y: 1015 },
];
const barChart = document.querySelector('vega-bar-chart');
barChart.options = {
  layout: {
    width: 500,
    height: 300,
  },
  dataSource: weeklyData,
  legends: ['Vega'],
};

Horizontal Example

<vega-bar-chart></vega-bar-chart>
const weeklyData = [
  { x: 'Mon', y: 1167 },
  { x: 'Tue', y: 1492 },
  { x: 'Wed', y: 1782 },
  { x: 'Thu', y: 1253 },
  { x: 'Fri', y: 1702 },
  { x: 'Sat', y: 1288 },
  { x: 'Sun', y: 1015 },
];
const barChart = document.querySelector('vega-bar-chart');
barChart.options = {
  layout: {
    width: 500,
    height: 300,
  },
  dataSource: weeklyData,
  legends: ['Vega'],
  direction: 'horizontal',
};

Usage

Bar charts are simple charts designed for showing categorical data using rectangular bars on an x-y axis. In a simple bar chart, the height of the bar indicates the y value. Bar charts have the advantage of being intuitively understandable by most users. Complex data can be represented side-by-side.

Properties

Name Description Default
options* data source
required
Options
layout The chart layout
{width:number, height:number, margin:{top:number, left:number, right:number, bottom:number}}		 - -
legends The chart legends, required if legends need to be displayed
string[]		 - -
dataSource* The chart data source
{x:number, y:number}		 - -
colors The chart line color
vega design backgroud color token array		 bg-accent1-primary bg-accent2-primary bg-accent3-primary bg-accent4-primary bg-accent5-primary bg-accent6-primary bg-accent7-primary
xAxis The chart x axis setting
{ labelFormatter: text=> text }
yAxis The chart y axis setting
{labelFormatter: text=> text}
direction The direction of the layout for the bar chart
vertical horizontal		 vertical

Accessibility

Standards

  • Inline text spacing must be adjustable with custom stylesheets.
  • id attribute value must be unique.

Best Practices

  • It is generally better to show limited amounts of data on a bar chart. Complex charts can become confusing to users if there is too much to compare.
  • In most cases it is best to show data using vertical bar charts, however if The labels are too long, they can be difficult to read. In this case it may make more sense to use horizontal bars (where the x and y axes are switched).
  • If you need to show trends in data, it may make more sense to use a line chart.