Bar

Bar renders one data series as evenly spaced bars. Bar positions are calculated automatically from the supplied value order. Render multiple Bar layers with matching series-count and distinct series-index values to create grouped bars.

Import

import { Bar } from '@putianyi888/vue3-plots'

Example

<template>
    <div class="example-frame" :style="{ height: `${size.height}px`, width: `${size.width}px` }">
        <TransformGroup :domain="domain" :size="size">
            <Grid :x-ticks="barPositions" :y-ticks="yTicks" stroke-color="#e2e8f0" />
            <Bar
                ref="firstSeries"
                :series-count="2"
                :values="revenue"
                fill="#2563eb"
            />
            <Bar
                :series-count="2"
                :series-index="1"
                :values="profit"
                fill="#16a34a"
            />
            <Axis direction="horizontal" :ticks="barPositions" />
            <Axis direction="vertical" :ticks="yTicks" />
        </TransformGroup>
    </div>
</template>

<script setup lang="ts">
import { computed, useTemplateRef } from 'vue'
import { Axis, Bar, Grid, TransformGroup, getNiceTicks } from '@putianyi888/vue3-plots'
import type { PlotDomain, PlotSize } from '@putianyi888/vue3-plots'

const revenue = [2, 4, 3, 6, 5]
const profit = [1, 3, 2, 4, 3]
const size: PlotSize = { width: 640, height: 360 }
const domain: PlotDomain = { xMin: -0.5, xMax: 4.5, yMin: 0, yMax: 6.5 }
const yTicks = getNiceTicks(domain.yMin, domain.yMax)
const firstSeries = useTemplateRef('firstSeries')
const barPositions = computed(() => firstSeries.value?.positions ?? [])
</script>

<style scoped>
.example-frame {
  overflow-x: auto;
  position: relative;
}
</style>

Props

Prop	Type	Default	Description
direction	"vertical" | "horizontal"	'vertical'	Direction in which bars extend.
baseline	number		Data-space value from which bars extend. Defaults to the minimum value of the value axis domain.
domain	PlotDomain		Data-space bounds used to map bar values onto the plot area.
size	PlotSize		Outer SVG size in pixels.
padding	PlotPadding		Insets shared with other plot layers.
seriesCount	number	1	Total number of side-by-side data series.
seriesIndex	number	0	Zero-based index of this data series within its category group.
gap	number	0.2	Empty fraction of each category band between adjacent category groups.
subGap	number	0.04	Gap between side-by-side series, as a fraction of the category band.
values	number[]	Required	Bar values. Each index represents one automatically positioned category.

Exposed

Exposed	Type	Description
bars	BarRect[]	Rendered bar rectangles in SVG coordinates.
positions	number[]	Data-space centers of the automatically positioned bars.

Notes

gap controls the empty portion between adjacent categories, while sub-gap controls spacing between series in one category. Both values are proportions of a category band.

The baseline defaults to domain.yMin for vertical bars and domain.xMin for horizontal bars. Pass baseline when bars should extend from another data-space value.

The exposed positions array contains the data-space center coordinate of every bar. Pass it to a horizontal Axis for vertical bars or a vertical Axis for horizontal bars to align ticks with the categories. bars exposes the rendered SVG rectangles when their exact geometry is needed.

All non-prop attributes are forwarded to every rendered SVG <rect>. For example, use fill, stroke, stroke-width, rx, and opacity to style a series. Refer to MDN's SVG attribute reference for the complete set of available attributes.