Appearance

On this page

Charts > Bar chart ​

A bar chart uses rectangular bars to display the values of different categories or groups. The length or height of each bar corresponds to the quantity or value it represents.

The Chart ​

    Market value of 10 top global brands in 2018, in billions of dollars

    Download example CSV
    Copy HTML

    Playground ​

    Animation

    Duration of animation in seconds

    Style

    Color of bars
    Color of labels
    Color of compare marks
    Use thinner bars
    Show labels inside bars
    Show name labels
    Show value labels
    Show value label right aligned inside bar
    Show background of bar
    Color of bar background
    Round corners bar

    Usage Example (with tooltip) ​

    vue
    <template>
  <BarChart :data="data" @hover="setTooltip" class="list-none max-w-lg" />

  <OTTooltip :info="tooltip"> {{ tooltip?.data?.name }} </OTTooltip>
</template>

<script setup>
import useTooltip from "@/functions/useTooltip.js";

const [tooltip, setTooltip] = useTooltip();
</script>

    Component API ​

    The bar chart is built using the BarChart and BarChartItem components.

    The changing of position of the bars is animated using the transition-group component with CSS transition classes (class name flip-list-move). The width of the bars is animated using GSAP in the BarChartItem component.

    The BarChart exposes the BarChartItem component through a scoped slot, which you can use to render different content. For example a label, icon, or other component next to the bar.

    To do this, grab the component from the slot props and render it using a dynamic component:

    js
    <BarChart v-slot="{ item, component }">
  <component :is="component" >
</BarChart >

    Using the slot like this is only necessary if you want to show additional content, besides the bar. By default, it renders the bar component.

    Data ​

    js
    [
  { id: "1", name: "Data 1", value: 60 },
  ...
]

    INFO

    Optional: color, compare, compareColor

    Data Shape for Uploadable CSV (example data)
    Namevalue
    Spain12
    France7
    Italy34
    Germany20

    Props ​

    NameDefaultTypeDescription
    data[]ArrayThe dataset
    maxnullNumberThe value of a full width bar, computed from data if null
    color#eeeString | FunctionThe default color for bars
    bgColornullStringThe color for the background of the bar
    compareColor#000String | FunctionThe default color for compare marks
    smallfalseBooleanWhether or not to use thin bars
    compactfalseBooleanWhether or not to show labels inside the bars instead of above
    roundedtrueBooleanWhether of not to round the corners of the bars
    showNametrueBooleanWhether or not to show name labels
    showNumbertrueBooleanWhether or not to show number labels
    numberRightfalseBooleanWhether or not to align number labels to the right
    format(d) => d.toFixed(0) + '%'FunctionThe format function for number label
    duration0.5NumberThe time of the animation in s

    Events ​

    EventArgumentDescription
    @select{ target, data }Emitted when bar is clicked
    @hover{ target, data }Emitted when bar is hovered

    Dependencies ​

    • GSAP
    • BarChartItem component