Line Chart

Display data trends over time with connected data points

⬇ Download PNG Import Data Use CSV Data

Chart Title

X-Axis Label

Y-Axis Label

Y-Min

Y-Max

Legend Position Top Bottom Left Right

Border Radius

Series 1

Series Name

Color

Data (JSON) ["Jan", "Feb", "Mar", "Apr", "May", "Jun"] [120, 200, 150, 280, 210, 350]

Line 1: X-axis categories, Line 2: Y-axis values

Smoothed Line Chart

Line chart with smooth curve interpolation

⬇ Download PNG Import Data Use CSV Data

Chart Title

X-Axis Label

Y-Axis Label

Y-Min

Y-Max

Legend Position Top Bottom Left Right

Series 1

Series Name

Color

Data (JSON) ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "23:59"] [12, 15, 18, 25, 22, 16, 13]

Multi-Line Chart

Compare multiple data series on the same chart

⬇ Download PNG Import Data Use CSV Data

Chart Title

X-Axis Label

Y-Axis Label

Legend Position Top Bottom Left Right

Region 1

Name

Color

Region 2

Name

Color

Region 3

Name

Color

Data (JSON) ["Jan", "Feb", "Mar", "Apr", "May", "Jun"] [820, 932, 901, 934, 1290, 1330] [620, 732, 701, 834, 1090, 1230] [520, 632, 801, 734, 990, 1130]

Step Line Chart

Line chart with step-wise progression

⬇ Download PNG Import Data Use CSV Data

Chart Title

X-Axis Label

Y-Axis Label

Legend Position Top Bottom Left Right

Series 1

Name

Color

Data (JSON) ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] [500, 500, 450, 450, 600, 600, 550]

Stacked Line Chart

Multiple line series stacked vertically

⬇ Download PNG Import Data Use CSV Data

Chart Title

X-Axis Label

Y-Axis Label

Legend Position Top Bottom Left Right

Series 1

Series Name

Color

Series 2

Series Name

Color

Series 3

Series Name

Color

Data (JSON) ["Q1", "Q2", "Q3", "Q4"] [120, 200, 150, 280] [220, 180, 290, 310] [150, 210, 190, 250]

Line 1: Categories, Lines 2-4: Series data

Basic Area Chart

Area chart with filled region below the line

⬇ Download PNG Import Data Use CSV Data

Chart Title

X-Axis Label

Y-Axis Label

Y-Min

Y-Max

Legend Position Top Bottom Left Right

Series 1

Series Name

Color

Data (JSON) ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] [1200, 1500, 1800, 2200, 2800, 3200, 2900]

Stacked Area Chart

Multiple area series stacked to show cumulative totals

⬇ Download PNG Import Data Use CSV Data

Chart Title

X-Axis Label

Y-Axis Label

Legend Position Top Bottom Left Right

Series 1

Series Name

Color

Series 2

Series Name

Color

Data (JSON) ["Jan", "Feb", "Mar", "Apr", "May", "Jun"] [320, 350, 380, 420, 450, 480] [180, 200, 220, 250, 280, 310]

Gradient Stacked Area Chart

Stacked area chart with gradient fills

⬇ Download PNG Import Data Use CSV Data

Chart Title

X-Axis Label

Y-Axis Label

Legend Position Top Bottom Left Right

Series 1

Series Name

Color

Series 2

Series Name

Color

Data (JSON) ["6am", "9am", "12pm", "3pm", "6pm", "9pm"] [400, 800, 1200, 1100, 900, 500] [200, 450, 600, 550, 400, 250]

Bar Chart

Classic vertical bar chart for categorical data

⬇ Download PNG Import Data Use CSV Data

Chart Title

X-Axis Label

Y-Axis Label

Y-Min

Y-Max

Legend Position Top Bottom Left Right

Border Radius

Series 1

Name

Color

Data (JSON) ["Q1", "Q2", "Q3", "Q4"] [2.5, 3.2, 2.8, 4.1]

Stacked Bar Chart

Multiple data series stacked in vertical bars

⬇ Download PNG Import Data Use CSV Data

Chart Title

X-Axis Label

Y-Axis Label

Legend Position Top Bottom Left Right

Border Radius

Series 1

Name

Color

Series 2

Name

Color

Series 3

Name

Color

Data (JSON) ["Engineering", "Sales", "Marketing", "HR", "Operations"] [45, 32, 28, 15, 38] [12, 18, 15, 8, 12] [8, 10, 5, 3, 7]

Horizontal Bar Chart

Bar chart with horizontal orientation

⬇ Download PNG Import Data Use CSV Data

Chart Title

X-Axis Label

Y-Axis Label

Legend Position Top Bottom Left Right

Border Radius

Series 1

Name

Color

Data (JSON) ["Product A", "Product B", "Product C", "Product D", "Product E"] [4.8, 4.2, 4.5, 3.9, 4.6]

Stacked Horizontal Bar Chart

Stacked bars in horizontal orientation

⬇ Download PNG Import Data Use CSV Data

Chart Title

X-Axis Label

Y-Axis Label

Legend Position Top Bottom Left Right

Border Radius

Series 1

Name

Color

Series 2

Name

Color

Series 3

Name

Color

Data (JSON) ["Q1", "Q2", "Q3", "Q4"] [65, 72, 58, 81] [25, 18, 30, 12] [10, 10, 12, 7]

Waterfall Chart

Show cumulative effect of sequential values

⬇ Download PNG Import Data Use CSV Data

Chart Title

X-Axis Label

Y-Axis Label

Legend Position Top Bottom Left Right

Positive Color

Negative Color

Data (JSON) ["Revenue", "COGS", "Operating Expenses", "Marketing", "Net Profit"] [1000, -350, -250, -120, 280]

Negative values show decreases

Histogram with Custom Series

Distribution chart with customizable bins

⬇ Download PNG Import Data Use CSV Data

Chart Title

X-Axis Label

Y-Axis Label

Legend Position Top Bottom Left Right

Border Radius

Series 1

Name

Color

Data (JSON) ["0-10", "11-20", "21-30", "31-40", "41-50", "51-60", "61-70", "71-80"] [45, 120, 250, 320, 280, 180, 90, 35]

Pie Chart

Classic circular chart showing proportions

⬇ Download PNG Import Data Use CSV Data

Chart Title

Legend Position Top Bottom Left Right

Border Radius

Colors (comma-separated hex codes)

Data (JSON) [ {"name": "Research", "value": 30}, {"name": "Development", "value": 35}, {"name": "Marketing", "value": 20}, {"name": "Operations", "value": 10}, {"name": "Admin", "value": 5} ]

Donut Chart

Pie chart with a hollow center

⬇ Download PNG Import Data Use CSV Data

Chart Title

Legend Position Top Bottom Left Right

Border Radius

Colors (comma-separated hex codes)

Data (JSON) [ {"name": "Company A", "value": 35}, {"name": "Company B", "value": 28}, {"name": "Company C", "value": 18}, {"name": "Company D", "value": 12}, {"name": "Others", "value": 7} ]

JSON array with name and value properties

Radar Chart

Spider/web chart for multivariate data

⬇ Download PNG Import Data Use CSV Data

Chart Title

Legend Position Top Bottom Left Right

Series 1

Name

Color

Series 2

Name

Color

Indicators (JSON) [ {"name": "Communication", "max": 100}, {"name": "Technical Skills", "max": 100}, {"name": "Leadership", "max": 100}, {"name": "Problem Solving", "max": 100}, {"name": "Teamwork", "max": 100} ]

Data (JSON) [[85, 90, 75, 88, 92], [78, 85, 88, 82, 86]]

Array of value arrays for each series

Radial Polar Bar Chart

Circular bar chart in polar coordinates

⬇ Download PNG Import Data Use CSV Data

Chart Title

Legend Position Top Bottom Left Right

Border Radius

Series 1

Name

Color

Data (JSON) ["Sleep", "Work", "Exercise", "Leisure", "Meals", "Commute"] [8, 9, 2, 3, 1.5, 0.5]

Gauge Chart

Display progress or performance metrics

⬇ Download PNG Import Data

Chart Title

Legend Position Top Bottom Left Right

Min Value

Max Value

Current Value

Label

Gauge Color

Sunburst Chart

Radial hierarchical visualization

⬇ Download PNG Import Data

Chart Title

Legend Position Top Bottom Left Right

Border Radius

Colors (comma-separated hex codes)

Data (JSON - hierarchical structure) { "name": "CEO", "children": [ { "name": "Engineering", "children": [ {"name": "Frontend", "value": 80}, {"name": "Backend", "value": 120}, {"name": "DevOps", "value": 50} ] }, { "name": "Sales", "children": [ {"name": "Enterprise", "value": 100}, {"name": "SMB", "value": 80} ] }, { "name": "Marketing", "value": 60 } ] }

Heatmap

2D grid showing data intensity with colors

⬇ Download PNG Import Data Use CSV Data

Chart Title

X-Axis Label

Y-Axis Label

Legend Position Top Bottom Left Right

Min Color

Max Color

X-Axis Categories (JSON) ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"]

Y-Axis Categories (JSON) ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

Data (JSON - [x, y, value] tuples) [[0,0,5],[1,0,8],[2,0,12],[3,0,35],[4,0,45],[5,0,38],[6,0,28],[7,0,15],[0,1,6],[1,1,9],[2,1,14],[3,1,38],[4,1,48],[5,1,40],[6,1,30],[7,1,18]]

Array of [x-index, y-index, value] tuples

Monthly Calendar Heatmap

Visualize data intensity across months

⬇ Download PNG Import Data Use CSV Data

Chart Title

Legend Position Top Bottom Left Right

Min Color

Max Color

Calendar Year

Year to display (e.g., 2024)

Data (JSON - date and value) [ ["2024-01-15", 520], ["2024-02-20", 680], ["2024-03-10", 590], ["2024-04-25", 750], ["2024-05-18", 820], ["2024-06-12", 710], ["2024-07-08", 890], ["2024-08-22", 650], ["2024-09-14", 720], ["2024-10-30", 880], ["2024-11-16", 950], ["2024-12-05", 810] ]

Array of [date, value] pairs (YYYY-MM-DD format)

Daily Calendar Heatmap

GitHub-style contribution calendar

⬇ Download PNG Import Data Use CSV Data

Chart Title

Legend Position Top Bottom Left Right

Min Color

Max Color

Calendar Year

Year to display (e.g., 2024)

Data (Date, Value pairs) ["2024-01-05", "2024-01-12", "2024-01-18", "2024-02-03", "2024-02-14", "2024-02-28", "2024-03-07", "2024-03-15", "2024-03-22", "2024-04-05", "2024-04-18", "2024-04-25", "2024-05-02", "2024-05-16", "2024-05-23", "2024-06-04", "2024-06-19", "2024-06-27", "2024-07-08", "2024-07-14", "2024-07-25", "2024-08-03", "2024-08-17", "2024-08-29", "2024-09-05", "2024-09-18", "2024-09-24", "2024-10-02", "2024-10-15", "2024-10-28", "2024-11-06", "2024-11-19", "2024-11-27", "2024-12-04", "2024-12-18", "2024-12-25"] [5, 12, 8, 15, 22, 18, 9, 25, 14, 11, 28, 19, 7, 16, 23, 13, 20, 17, 10, 24, 15, 8, 21, 16, 12, 26, 18, 14, 19, 22, 11, 17, 20, 9, 15, 27]

Line 1: Dates (YYYY-MM-DD), Line 2: Values

Force Layout

Network graph with force-directed layout

⬇ Download PNG Import Data

Chart Title

Legend Position Top Bottom Left Right

Node Color

Link Color

Nodes (JSON) [ {"name": "Node 1", "value": 10}, {"name": "Node 2", "value": 15}, {"name": "Node 3", "value": 8}, {"name": "Node 4", "value": 12}, {"name": "Node 5", "value": 10}, {"name": "Node 6", "value": 7} ]

Links (JSON - source and target indices) [ {"source": 0, "target": 1}, {"source": 0, "target": 2}, {"source": 1, "target": 3}, {"source": 2, "target": 3}, {"source": 3, "target": 4}, {"source": 4, "target": 5}, {"source": 2, "target": 5} ]

Source/target refer to node indices (0-based)

Chord Diagram

Visualize inter-relationships between entities

⬇ Download PNG Import Data Use CSV Data

Chart Title

Legend Position Top Bottom Left Right

Colors (comma-separated hex codes)

Categories (JSON) ["Region A", "Region B", "Region C", "Region D"]

Matrix (JSON - adjacency matrix) [ [0, 5, 3, 2], [4, 0, 6, 1], [3, 7, 0, 4], [2, 1, 5, 0] ]

Square matrix showing relationships

Sankey Diagram

Flow diagram showing quantity transfers

⬇ Download PNG Import Data Use CSV Data

Chart Title

Legend Position Top Bottom Left Right

Node Color

Nodes (JSON) [ {"name": "Source A"}, {"name": "Source B"}, {"name": "Process 1"}, {"name": "Process 2"}, {"name": "Output 1"}, {"name": "Output 2"} ]

Links (JSON) [ {"source": "Source A", "target": "Process 1", "value": 50}, {"source": "Source B", "target": "Process 1", "value": 30}, {"source": "Source A", "target": "Process 2", "value": 20}, {"source": "Process 1", "target": "Output 1", "value": 60}, {"source": "Process 1", "target": "Output 2", "value": 20}, {"source": "Process 2", "target": "Output 2", "value": 20} ]

Source/target must match node names

Sankey Diagram (Vertical)

Vertical orientation Sankey flow diagram

⬇ Download PNG Import Data Use CSV Data

Chart Title

Legend Position Top Bottom Left Right

Node Color

Nodes (JSON) [ {"name": "Homepage"}, {"name": "Product Page"}, {"name": "Cart"}, {"name": "Checkout"}, {"name": "Purchase"}, {"name": "Exit"} ]

Links (JSON) [ {"source": "Homepage", "target": "Product Page", "value": 1000}, {"source": "Homepage", "target": "Exit", "value": 300}, {"source": "Product Page", "target": "Cart", "value": 600}, {"source": "Product Page", "target": "Exit", "value": 400}, {"source": "Cart", "target": "Checkout", "value": 450}, {"source": "Cart", "target": "Exit", "value": 150}, {"source": "Checkout", "target": "Purchase", "value": 380}, {"source": "Checkout", "target": "Exit", "value": 70} ]

Parallel Coordinates

Visualize multivariate data with parallel axes

⬇ Download PNG Import Data Use CSV Data

Chart Title

Legend Position Top Bottom Left Right

Line Color

Dimensions (JSON) [ {"name": "Price", "min": 0, "max": 1000}, {"name": "Quality", "min": 0, "max": 10}, {"name": "Popularity", "min": 0, "max": 100}, {"name": "Durability", "min": 0, "max": 10} ]

Data (JSON - arrays of values) [ [250, 8, 75, 9], [450, 9, 85, 8], [180, 6, 45, 7], [680, 9.5, 90, 9.5], [320, 7, 60, 6] ]

Each array represents one data item

Treemap

Hierarchical data visualization with nested rectangles

⬇ Download PNG Import Data

Chart Title

Legend Position Top Bottom Left Right

Border Radius

Colors (comma-separated hex codes)

Data (JSON - hierarchical structure) { "name": "Company", "children": [ { "name": "Engineering", "value": 450 }, { "name": "Sales", "value": 320 }, { "name": "Marketing", "value": 180 }, { "name": "Operations", "value": 250 }, { "name": "HR", "value": 120 } ] }

Hierarchical JSON with name and value/children

Funnel Chart

Visualize conversion rates through stages

⬇ Download PNG Import Data Use CSV Data

Chart Title

Legend Position Top Bottom Left Right

Colors (comma-separated hex codes)

Data (JSON) [ {"name": "Visitors", "value": 10000}, {"name": "Leads", "value": 5000}, {"name": "Qualified", "value": 2500}, {"name": "Proposals", "value": 1000}, {"name": "Customers", "value": 500} ]

Flame Graph

Hierarchical visualization for profiling data

⬇ Download PNG Import Data

Chart Title

Legend Position Top Bottom Left Right

Border Radius

Colors (comma-separated hex codes)

Data (JSON - hierarchical structure) { "name": "main()", "value": 100, "children": [ { "name": "processData()", "value": 45, "children": [ {"name": "parseJSON()", "value": 20}, {"name": "validateData()", "value": 15}, {"name": "transform()", "value": 10} ] }, { "name": "renderUI()", "value": 35, "children": [ {"name": "createElement()", "value": 15}, {"name": "applyStyles()", "value": 10}, {"name": "attachEvents()", "value": 10} ] }, { "name": "networkCall()", "value": 20 } ] }

Hierarchical JSON with name, value, and children

Scatter Chart

Display correlation between two variables

⬇ Download PNG Import Data Use CSV Data

Chart Title

X-Axis Label

Y-Axis Label

Legend Position Top Bottom Left Right

Series 1

Name

Color

Point Size

Data (JSON - [x, y] pairs) [[100, 65], [200, 72], [150, 68], [300, 85], [250, 78], [180, 70], [350, 88], [120, 67], [280, 82], [220, 75]]

Array of [x, y] coordinate pairs

Candlestick Chart

Financial chart showing OHLC data

⬇ Download PNG Import Data Use CSV Data

Chart Title

X-Axis Label

Y-Axis Label

Legend Position Top Bottom Left Right

Up Color

Down Color

Data (JSON - [open, close, low, high] for each date) ["2024-01-01", "2024-01-02", "2024-01-03", "2024-01-04", "2024-01-05"] [[100, 105, 98, 108], [105, 102, 101, 106], [102, 110, 100, 112], [110, 108, 106, 113], [108, 115, 107, 118]]

Line 1: Dates, Line 2: OHLC data arrays

Bump Chart

Track ranking changes over time

⬇ Download PNG Import Data Use CSV Data

Chart Title

Legend Position Top Bottom Left Right

Company A

Color

Company B

Color

Company C

Color

Data (Rankings by Period) ["2020", "2021", "2022", "2023", "2024"] [1, 3, 2, 1, 2] [2, 1, 3, 2, 1] [3, 2, 1, 3, 3]

Line 1: Periods, Lines 2-4: Rankings (1=top)

Function Plot

Plot mathematical functions

⬇ Download PNG Import Data

Chart Title

X-Min

X-Max

Legend Position Top Bottom Left Right

Function 1

Name

Color

Function 2

Name

Color

Step Size

Smaller = smoother curve