---
title: "Bar, Line and Area Charts in JavaScript"
description: "Bar chart, stacked and 100%-stacked bar, line chart, area chart, streamgraph, scatter, bubble, waterfall, histogram, pareto, candlestick and boxplot."
source: https://lemonadejs.com/charts/docs/cartesian/
---

# Bar, line and area charts

A bar chart, a line chart and an area chart share one grid: `categories` on
the x-axis, values on y. The bar chart renders in plain HTML + CSS (flex
columns with percentage heights, responsive with zero JavaScript); the line
chart and area chart are a single scaling SVG.

## Bar chart: grouped and stacked

<!--example-->

```js
import Charts from '@lemonadejs/charts';

const series = [
    { name: 'Product A', data: [120, 190, 80, 220] },
    { name: 'Product B', data: [80, 105, 130, 140] },
];

const App = () => html`<div>
    <${Charts} type="bar" categories="${['Q1', 'Q2', 'Q3', 'Q4']}"
        series="${series}" legend labels />
</div>`;
```

Variants are props, not new chart types:

- `type="stackedbar"`: stacks the series; add `stackmode="percent"` for a
  100%-stacked chart.
- `horizontal`: categories move to the y-axis.
- `horizontal mirror` gives a population pyramid: the first series grows
  leftward with absolute labels.
- `ymin` / `ymax` force the y-range; `ylog` gives a logarithmic y-axis.

## Line, area, step and streamgraph

<!--example-->

```js
import Charts from '@lemonadejs/charts';

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const series = [
    { name: 'Users', data: [42, 51, 60, 55, 71, 68, 84, 90, 82, 95, 102, 110] },
    { name: 'Average', data: [40, 44, 47, 50, 55, 58, 63, 68, 71, 76, 82, 86], dashed: true },
];

const App = () => html`<${Charts} type="line" categories="${months}"
    series="${series}" smooth markers="${false}" legend labels />`;
```

- `smooth` draws spline curves; `step` draws stairs (`true`/`'before'` or `'mid'`).
- `area` fills under the line; `markers` adds point dots (on by default).
- `dashed: true` on a series draws it dashed (good for targets/averages).
- `type="stackedarea"` stacks the fills; `type="streamgraph"` centers them.

### Continuous and datetime x-axes

By default the x-axis is categorical. Set `xtype="datetime"` (ISO date
categories) or `xtype="linear"` for continuous axes, and `xformat` for
custom tick labels.

## Combo charts and a second axis

Per-series overrides make combos: give a series its own `type`, and put it
on the right axis with `axis: 'right'`:

<!--example-->

```js
import Charts from '@lemonadejs/charts';

const series = [
    { name: 'Revenue', type: 'bar', data: [120, 190, 80, 220] },
    { name: 'Margin %', type: 'line', axis: 'right', data: [18, 26, 12, 31] },
];

const App = () => html`<${Charts} type="bar"
    categories="${['Q1', 'Q2', 'Q3', 'Q4']}" series="${series}"
    ytitle="Revenue" y2title="Margin" legend />`;
```

## Scatter and bubble

Points are `[x, y]` pairs (bubble adds a size: `[x, y, z]`):

```js
const series = [
    { name: 'Measured', type: 'scatter',
      data: [[1.2, 11], [2.1, 14], [2.8, 13], [3.9, 17], [5.1, 16]] },
    { name: 'Trend', type: 'line', smooth: true,
      data: [[1, 10], [2, 13], [3, 14], [4, 16], [5, 17]] },
];
html`<${Charts} type="scatter" series="${series}" xtitle="Epoch" ytitle="Cost" />`
```

## Waterfall, histogram and pareto

<!--example-->

```js
import Charts from '@lemonadejs/charts';

const App = () => html`<div>
    <${Charts} type="waterfall" title="Cash flow"
        categories="${['Start', 'Sales', 'Refunds', 'Fees', 'Net']}"
        series="${[{ data: [120, 45, -30, -15, 25] }]}" labels legend="${false}" />
    <${Charts} type="pareto" title="Complaints"
        categories="${['Late ship', 'Damage', 'Wrong item', 'Billing', 'Other']}"
        series="${[{ name: 'Complaints', data: [17, 42, 9, 24, 6] }]}" />
</div>`;
```

- **waterfall**: positive/negative deltas walk from start to net.
- **histogram**: pass raw samples in one series; bin count via `bins`
  (unset = Sturges' rule).
- **pareto**: bars sorted descending plus the cumulative-% line on the
  right axis.

## Statistical and range types

- **candlestick / ohlc**: points are `[open, high, low, close]` per
  category.
- **boxplot**: points are `[min, q1, median, q3, max]`.
- **arearange / columnrange**: points are `[low, high]` pairs.
- **dumbbell**: `[from, to]` pairs; **lollipop**: a slim single-series
  bar with a dot.

## Zoom and navigator

For dense line/bar data, `zoom` enables drag-select along x (with a reset
button) and `navigator` adds an overview strip with a draggable window;
see [Interactivity](/charts/docs/interactivity/).