FreeData chart templates

70 free data charts you can put on any website

All 70 charts are live, in 7 categories. Every chart is drawn with plain HTML, CSS and vanilla JavaScript, with no chart library. Each one comes with a live demo, a clear guide on when to use it, the key code, and a single HTML file to download. Change the numbers, keep the design. Free for commercial use.

See the chartsDownload everything (ZIP)Star on GitHub
Chart types in the setComparison Charts
Free charts
with live demos
707 categories

No library. Just charts.

1. Comparison Charts

See all 10 comparison charts
Bar Chart example: weekly bread sales at a bakery

001. Bar Chart

Example: weekly bread sales at a bakery
Grouped Bar Chart example: cinema ticket sales for three locations per quarter

002. Grouped Bar Chart

Example: cinema ticket sales for three locations per quarter
Stacked Bar Chart example: website visits by source for an outdoor shop

003. Stacked Bar Chart

Example: website visits by source for an outdoor shop
100% Stacked Bar Chart example: customer survey results for five grocery stores

004. 100% Stacked Bar Chart

Example: customer survey results for five grocery stores
Horizontal Bar Chart example: the most borrowed library books of the year

005. Horizontal Bar Chart

Example: the most borrowed library books of the year
Lollipop Chart example: average delivery time by city with a 24 hour target

006. Lollipop Chart

Example: average delivery time by city with a 24 hour target
Dot Plot example: small, medium and large latte prices in eight cities

007. Dot Plot

Example: small, medium and large latte prices in eight cities
Dumbbell Chart example: commute times before and after a new tram line

008. Dumbbell Chart

Example: commute times before and after a new tram line
Bullet Chart example: solar panel installs against target for six regions

009. Bullet Chart

Example: solar panel installs against target for six regions
Diverging Bar Chart example: visitor gains and losses for ten city parks

010. Diverging Bar Chart

Example: visitor gains and losses for ten city parks

2. Trends Over Time

See all 10 trends over time
Line Chart example: new members each month for a yoga studio app

011. Line Chart

Example: new members each month for a yoga studio app
Multi Line Chart example: average home prices in three neighborhoods over ten years

012. Multi Line Chart

Example: average home prices in three neighborhoods over ten years
Area Chart example: solar power made each day by a family home

013. Area Chart

Example: solar power made each day by a family home
Stacked Area Chart example: hours watched each month on a streaming app, by device

014. Stacked Area Chart

Example: hours watched each month on a streaming app, by device
Streamgraph example: weekly listening hours by genre on a radio app

015. Streamgraph

Example: weekly listening hours by genre on a radio app
Step Line Chart example: the interest rate on a savings account from 2021 to 2026

016. Step Line Chart

Example: the interest rate on a savings account from 2021 to 2026
Sparkline example: daily sales for six products in a shop dashboard

017. Sparkline

Example: daily sales for six products in a shop dashboard
Candlestick Chart example: daily share prices and volume for a made up robotics company

018. Candlestick Chart

Example: daily share prices and volume for a made up robotics company
Slope Chart example: guest ratings for eight hotels in 2025 and 2026

019. Slope Chart

Example: guest ratings for eight hotels in 2025 and 2026
Horizon Chart example: daily temperature above or below normal for six cities over a year

020. Horizon Chart

Example: daily temperature above or below normal for six cities over a year

3. Part to Whole

See all 10 part to whole
Pie Chart example: how customers paid at a cafe

021. Pie Chart

Example: how customers paid at a cafe
Donut Chart example: workouts logged by members of a fitness app

022. Donut Chart

Example: workouts logged by members of a fitness app
Semi Donut Chart example: a fundraising appeal and the money still needed

023. Semi Donut Chart

Example: a fundraising appeal and the money still needed
Treemap example: bookshop sales by section and genre

024. Treemap

Example: bookshop sales by section and genre
Sunburst Chart example: where a city sends its household waste

025. Sunburst Chart

Example: where a city sends its household waste
Waffle Chart example: how 100 new customers found a furniture shop

026. Waffle Chart

Example: how 100 new customers found a furniture shop
Marimekko Chart example: e-bike market share by region and brand

027. Marimekko Chart

Example: e-bike market share by region and brand
Funnel Chart example: shoppers moving from first visit to purchase in an online shop

028. Funnel Chart

Example: shoppers moving from first visit to purchase in an online shop
Icicle Chart example: what is filling up a laptop drive

029. Icicle Chart

Example: what is filling up a laptop drive
Circle Packing Chart example: staff at a food company grouped by department and team

030. Circle Packing Chart

Example: staff at a food company grouped by department and team

4. Distribution

See all 10 distribution
Histogram example: delivery times for 600 pizza orders

031. Histogram

Example: delivery times for 600 pizza orders
Box Plot example: monthly rent for flats in six neighborhoods

032. Box Plot

Example: monthly rent for flats in six neighborhoods
Violin Plot example: coffee order waits at four cafes

033. Violin Plot

Example: coffee order waits at four cafes
Density Plot example: sunflower heights with and without plant feed

034. Density Plot

Example: sunflower heights with and without plant feed
Ridgeline Plot example: daily high temperatures for each month of the year

035. Ridgeline Plot

Example: daily high temperatures for each month of the year
Beeswarm Plot example: finish times for 300 marathon runners

036. Beeswarm Plot

Example: finish times for 300 marathon runners
Strip Plot example: train delays on five lines over 60 weekdays

037. Strip Plot

Example: train delays on five lines over 60 weekdays
Population Pyramid example: the age of a town in 2006 and 2026

038. Population Pyramid

Example: the age of a town in 2006 and 2026
Error Bar Chart example: battery life test results for five phones

039. Error Bar Chart

Example: battery life test results for five phones
Cumulative Distribution Chart example: page load times for three versions of a website

040. Cumulative Distribution Chart

Example: page load times for three versions of a website

5. Relationships

See all 10 relationships
Scatter Plot example: used car prices against mileage

041. Scatter Plot

Example: used car prices against mileage
Bubble Chart example: ad campaigns compared on cost, conversion and budget

042. Bubble Chart

Example: ad campaigns compared on cost, conversion and budget
Heatmap example: gym check-ins by day and hour

043. Heatmap

Example: gym check-ins by day and hour
Correlation Matrix example: what drives daily sales at a cafe

044. Correlation Matrix

Example: what drives daily sales at a cafe
Connected Scatter Plot example: monthly bike share trips against average temperature

045. Connected Scatter Plot

Example: monthly bike share trips against average temperature
Hexbin Plot example: distance and fare for 3,000 taxi rides

046. Hexbin Plot

Example: distance and fare for 3,000 taxi rides
Contour Plot example: a hill walk with height lines and a trail

047. Contour Plot

Example: a hill walk with height lines and a trail
Radar Chart example: three laptops scored on six features

048. Radar Chart

Example: three laptops scored on six features
Parallel Coordinates Chart example: rental flats compared on six measures

049. Parallel Coordinates Chart

Example: rental flats compared on six measures
Quadrant Chart example: app features sorted by effort and impact

050. Quadrant Chart

Example: app features sorted by effort and impact

6. Flow and Network

See all 10 flow and network
Sankey Diagram example: website visitors from source to landing page to outcome

051. Sankey Diagram

Example: website visitors from source to landing page to outcome
Chord Diagram example: customers switching between five phone networks

052. Chord Diagram

Example: customers switching between five phone networks
Arc Diagram example: characters who share scenes in a novel

053. Arc Diagram

Example: characters who share scenes in a novel
Network Graph example: who runs with whom in a running club

054. Network Graph

Example: who runs with whom in a running club
Alluvial Diagram example: customers changing plans over three years

055. Alluvial Diagram

Example: customers changing plans over three years
Tree Diagram example: a garden centre website map with monthly visits

056. Tree Diagram

Example: a garden centre website map with monthly visits
Dendrogram example: grocery items that shoppers buy together

057. Dendrogram

Example: grocery items that shoppers buy together
Org Chart example: the team structure of a design studio

058. Org Chart

Example: the team structure of a design studio
Flowchart example: how an online shop handles a return request

059. Flowchart

Example: how an online shop handles a return request
Radial Tree example: every music genre and style in a record shop

060. Radial Tree

Example: every music genre and style in a record shop

7. Dashboard Widgets

See all 10 dashboard widgets
Gauge Chart example: a hotel Net Promoter Score by quarter

061. Gauge Chart

Example: a hotel Net Promoter Score by quarter
Progress Ring Chart example: daily goals in a language learning app

062. Progress Ring Chart

Example: daily goals in a language learning app
KPI Cards with Sparklines example: revenue, orders, average order and returns for an online shop

063. KPI Cards with Sparklines

Example: revenue, orders, average order and returns for an online shop
Calendar Heatmap example: a year of code changes on an open source project

064. Calendar Heatmap

Example: a year of code changes on an open source project
Gantt Chart example: a cafe renovation plan with tasks and milestones

065. Gantt Chart

Example: a cafe renovation plan with tasks and milestones
Waterfall Chart example: how a bakery turns sales into profit

066. Waterfall Chart

Example: how a bakery turns sales into profit
Word Cloud example: words guests use in hotel reviews

067. Word Cloud

Example: words guests use in hotel reviews
Pictogram Chart example: trees planted by a charity each year

068. Pictogram Chart

Example: trees planted by a charity each year
Radial Bar Chart example: monthly sales for a surf shop

069. Radial Bar Chart

Example: monthly sales for a surf shop
Timeline example: the history of a solar installer from 2014 to 2026

070. Timeline

Example: the history of a solar installer from 2014 to 2026

Questions people ask

Are these charts really free?

Yes. Every chart is released under the MIT license. You can use them on personal sites, client work and paid products without asking.

Do I need a chart library like Chart.js or D3?

No. Every chart is drawn with plain SVG and vanilla JavaScript. There is nothing to install and no library to load, so pages stay small and fast.

How do I use one of these charts on my website?

Open the chart, click Download HTML file, replace the numbers in the DATA list with your own and upload the file. You can also copy the SVG and script into an existing page.

Do the charts work on phones?

Yes. Every chart redraws itself to fit the screen, moves labels on small screens and supports touch, mouse and keyboard.

Are the charts accessible?

Each value can be reached with the Tab key and read out by screen readers, and every chart includes a data table. Animations turn off for people who prefer reduced motion.