Skip to main content

Add a Chart

Charts work in the same way as the <Value/> component - you can add them anywhere in your markdown and reference SQL queries on the page.

So let's try to answer the question the Needful Things owner had about sales.

To do this, add an <AreaChart/>, a <LineChart/>, and a <BarChart/> component to your page.

Add to the bottom of business-performance.md:
## Monthly Sales
<AreaChart
data={data.monthly_orders}
x=order_month
y=sales_usd
/>
## Monthly Orders
<LineChart
data={data.monthly_orders}
x=order_month
y=orders
/>
## Basket Size
<BarChart
data={data.monthly_orders}
x=order_month
y=basket_size_usd
/>

line-chart

The first chart shows sales have overall been increasing across the three year period (though not every month).

The second and third charts show this is mainly due to an increasing number of orders - the average basket size has been relatively consistent over the period.

Visualization Components

Check out the Components section to see the full list of available components.