Line charts

Highcharts basic line chart JavaScript example displays graph plot of solar employment growth areas over time.

Basic line
Screenshot of 'Ajax loaded data, clickable points' demo

Ajax loaded data, clickable points
Screenshot of 'Line chart with 500k points' demo

Line chart with 500k points
Screenshot of 'Logarithmic axis' demo

Logarithmic axis
Screenshot of 'Spline with inverted axes' demo

Spline with inverted axes
Screenshot of 'Spline with plot bands' demo

Spline with plot bands
Screenshot of 'Spline with symbols' demo

Spline with symbols
Screenshot of 'Time data with irregular intervals' demo

Time data with irregular intervals
Screenshot of 'Time series, zoomable' demo

Time series, zoomable
Highcharts basic line chart with annotations JavaScript example displays annotated shaded graph plot of Tour France.

With annotations
Screenshot of 'With data labels' demo

With data labels

Area charts

Highcharts basic area chart JavaScript example graph compares cold war nuclear weapon stockpile peaks over time.

Basic area
Screenshot of 'Area range' demo

Area range
Screenshot of 'Area range and line' demo

Area range and line
Screenshot of 'Area with missing points' demo

Area with missing points
Screenshot of 'Area with negative values' demo

Area with negative values
Screenshot of 'Area-spline' demo

Area-spline
Screenshot of 'Inverted axes' demo

Inverted axes
Screenshot of 'Percentage area' demo

Percentage area
Screenshot of 'Sparkline charts' demo

Sparkline charts
Highcharts percentage area chart JavaScript example graph compares and estimates global continental population growth over time.

Stacked area
Screenshot of 'Streamgraph' demo

Streamgraph

Column and bar charts

Screenshot of 'Bar race' demo

Bar race
Highcharts vertical basic column chart JavaScript example graph compares monthly average rainfall in major cities clusters.

Basic column
Screenshot of 'Basic bar' demo

Basic bar
Screenshot of 'Bar with negative stack' demo

Bar with negative stack
Chart showing the top 5 countries by the amount of the winning gold medals from the last five editions of the Summer Olympics. The columns behind the main column show the results from the previous edition for a particular country. Each columns group has a xAxis label rendered as a country flag.

Column comparison
Screenshot of 'Column range' demo

Column range
Screenshot of 'Column with drilldown' demo

Column with drilldown
Screenshot of 'Column with negative values' demo

Column with negative values
Screenshot of 'Column with rotated labels' demo

Column with rotated labels
Screenshot of 'Data defined in a HTML table' demo

Data defined in a HTML table
Screenshot of 'Fixed placement columns' demo

Fixed placement columns
Screenshot of 'Stacked and grouped column' demo

Stacked and grouped column
Highcharts horizontal stacked bar chart JavaScript example graph compares human fruit consumption of apple pear grape.

Stacked bar
Screenshot of 'Stacked column' demo

Stacked column
Screenshot of 'Stacked percentage column' demo

Stacked percentage column

Pie charts

Highcharts basic pie chart JavaScript example compares Chrome Firefox Safari browser market share as proportional segments.

Pie chart
Screenshot of 'Donut chart' demo

Donut chart
Screenshot of 'Pie with drilldown' demo

Pie with drilldown
Screenshot of 'Pie with gradient fill' demo

Pie with gradient fill
Screenshot of 'Pie with legend' demo

Pie with legend
Screenshot of 'Pie with monochrome fill' demo

Pie with monochrome fill
Screenshot of 'Semi circle donut' demo

Semi circle donut
Screenshot of 'Variable radius pie' demo

Variable radius pie

Scatter and bubble charts

Highcharts scatter plot JavaScript example displaying individual measurements in a randomized horizontal position, increasing legibility.

Scatter plot with jitter
Screenshot of 'Bubble chart' demo

Bubble chart
Highcharts basic scatter plot JavaScript example graph compares width and height of athletes across different sports

Scatter plot
Highcharts 3D Bubbles chart JavaScript example graph compares series values as radial gradient fill bubble diagram.

3D bubbles
Screenshot of 'Packed bubble chart' demo

Packed bubble chart
Screenshot of 'Scatter plot with 1 million points' demo

Scatter plot with 1 million points
Screenshot of 'Split Packed bubble chart' demo

Split Packed bubble chart

Combinations

Screenshot of 'Advanced timeline' demo

Advanced timeline
Screenshot of 'Column, line and pie' demo

Column, line and pie
Screenshot of 'Dual axes, line and column' demo

Dual axes, line and column
Screenshot of 'Meteogram' demo

Meteogram
Screenshot of 'Multiple axes' demo

Multiple axes
Screenshot of 'Scatter with regression line' demo

Scatter with regression line
Screenshot of 'Synchronized charts' demo

Synchronized charts

Styled mode (CSS styling)

Screenshot of 'Styled mode column' demo

Styled mode column
Screenshot of 'Styled mode pie' demo

Styled mode pie

Accessible charts

Screenshot of 'Accessible line chart' demo

Accessible line chart
Screenshot of 'Accessible pie chart' demo

Accessible pie chart
Screenshot of 'Advanced accessible chart' demo

Advanced accessible chart
Screenshot of 'Sonification' demo

Sonification

Dynamic charts

Screenshot of 'Click to add a point' demo

Click to add a point
Screenshot of 'Live data from dynamic CSV' demo

Live data from dynamic CSV
Screenshot of 'Master-detail chart' demo

Master-detail chart
Screenshot of 'Responsive chart' demo

Responsive chart
Screenshot of 'Spline updating each second' demo

Spline updating each second
Screenshot of 'Update options after render' demo

Update options after render

3D charts

Screenshot of '3D area chart' demo

3D area chart
Screenshot of '3D column' demo

3D column
Screenshot of '3D column with null and 0 values' demo

3D column with null and 0 values
Screenshot of '3D column with stacking and grouping' demo

3D column with stacking and grouping
Highcharts 3D cylinder chart JavaScript example graph compares variables as three dimensional vertical color bar chart.

3D cylinder
Screenshot of '3D donut' demo

3D donut
Highcharts 3D funnel chart JavaScript example graph visualizes pipeline conversion of website visits to customers downloads.

3D funnel
Screenshot of '3D pie' demo

3D pie
Screenshot of '3D pyramid' demo

3D pyramid
Screenshot of '3D scatter chart' demo

3D scatter chart

Gauges

Screenshot of 'Activity gauge' demo

Activity gauge
Screenshot of 'Bullet graph' demo

Bullet graph
Screenshot of 'Clock' demo

Clock
Screenshot of 'Gauge series' demo

Gauge series
Screenshot of 'Gauge with dual axes' demo

Gauge with dual axes
Screenshot of 'Solid gauge' demo

Solid gauge
Screenshot of 'VU meter' demo

VU meter

Heat and tree maps

Screenshot of 'Heat map' demo

Heat map
Screenshot of 'Large heat map' demo

Large heat map
Screenshot of 'Large tree map' demo

Large tree map
Highcharts honeycomb tile map JavaScript example graph visualizes US population geographically by state with color chart.

Tile map, honeycomb
Screenshot of 'Tree map with color axis' demo

Tree map with color axis
Screenshot of 'Tree map with levels' demo

Tree map with levels

More chart types

Screenshot of 'Arc Diagram' demo

Arc Diagram
Screenshot of 'Bell curve' demo

Bell curve
Screenshot of 'Box plot' demo

Box plot
Screenshot of 'Column pyramid chart' demo

Column pyramid chart
Screenshot of 'Dependency wheel' demo

Dependency wheel
Screenshot of 'Dumbbell series' demo

Dumbbell series
Screenshot of 'Error bar' demo

Error bar
Screenshot of 'Euler diagram' demo

Euler diagram
Highcharts flame chart JavaScript example graph shows a chart rendering process as stacked tasks and subtasks.

Flame chart
Screenshot of 'Funnel chart' demo

Funnel chart
Screenshot of 'General drawing' demo

General drawing
Screenshot of 'Histogram' demo

Histogram
Screenshot of 'Lollipop series' demo

Lollipop series
Screenshot of 'Network graph (force directed graph)' demo

Network graph (force directed graph)
Screenshot of 'Organization chart' demo

Organization chart
Screenshot of 'Parallel coordinates' demo

Parallel coordinates
Highcharts pareto chart JavaScript example visualizes percentage restaurant complaints by combining line and vertical bar graphs.

Pareto chart
Highcharts parliament item chart JavaScript example visualizes German political party breakdown by color and percentage proportion.

Parliament (item) chart
Screenshot of 'Polar (radar) chart' demo

Polar (radar) chart
Screenshot of 'Polygon series' demo

Polygon series
Screenshot of 'Pyramid chart' demo

Pyramid chart
Screenshot of 'Radial bar chart' demo

Radial bar chart
Screenshot of 'Sankey diagram' demo

Sankey diagram
Screenshot of 'Spiderweb' demo

Spiderweb
Screenshot of 'Sunburst' demo

Sunburst
Highcharts timeline diagram JavaScript example visualizes space exploration over time with Sputnik to Apollo story chart.

Timeline
Screenshot of 'Variwide' demo

Variwide
Screenshot of 'Vector plot' demo

Vector plot
Screenshot of 'Venn diagram' demo

Venn diagram
Screenshot of 'Waterfall' demo

Waterfall
Screenshot of 'Wind barb' demo

Wind barb
Highcharts wind rose chart JavaScript example visualizes weather frequency conditions by compass direction using polar graph.

Wind rose
Screenshot of 'Word cloud' demo

Word cloud
Screenshot of 'X-range series' demo

X-range series