Bar Chart

A bar chart provides a way of sDemoing data values represented as component bars. It is sometimes used to sDemo trend data, and the component of multiple data sets side by side.

Installation

CLI

Manual

In the terminal, run the following command to begin:

npx hq-kit add chart

Basic

View

Code

Biweekly Revenue

Revenue breakdown every 2 weeks (Jan - Dec 2024)

Horizontal

View

Code

Data Center Uptime

Uptime percentage by region for Q1 2024

Label

View

Code

Customer Satisfaction Survey

Satisfaction scores by category

Inset Label

View

Code

Traffic by Country

Since Aug 17, 2014

Custom Label

View

Code

Team Project Status

Completed vs Ongoing Projects by Team

Mixed

View

Code

Browser Metrics

Grouped data for visitors, bounce rate, and average session duration

Negative

View

Code

Monthly Profit and Loss

January - December 2024

Multiple

View

Code

Sales vs Expenses

The chart shows the sales and expenses for the last year.

Stacked Legend

View

Code

Biweekly Revenue

Revenue breakdown every 2 weeks (Jan - Dec 2024)

Active

View

Code

Operating System Usage

User distribution by OS in 2024

Controlled

View

Code

Business Overview

Displaying total sales and revenue for the last 50 days