Dependencies

These graphs and charts depend on additional scripts. We recommended you include highcharts.js and highcharts-more.js. Also, if you don't have nc.min.css included, is recommended to include graphs.css.

The code for all the examples on this page can be found in graphs-examples.js.

Bar Charts

Dependencies

For this type of chart is recommended to include rounded-corners.js

Clustered

Created with Highcharts 5.0.10Rainfall (mm)Monthly Average Rainfall(Source: WorldClimate.com)TokyoNew YorkLondonBerlinJanFebMarAprMayJunJulAug050100150200250Highcharts.com
Copy
<div class="container-graph" id="bar-chart"></div>

Stacked

Created with Highcharts 5.0.10Number of ContractsForecast: Closing contracts(Source: thewikiinvest.org)OtherFramework agreementSepOktNovDecJanFebMarAprMaj01020304050
Copy
<div class="container-graph" id="bar-chart-stacked"></div>

Split

Created with Highcharts 5.0.10Customer and Supplier Invoices / Current Month(Source: fakeenergy.net)Customer invoiceSupplier Invoices0123456789101112131415161718192021-1000-750-500-25002505007501000
Copy
<div class="container-graph" id="bar-chart-split"></div>

Two-sided Scales

Created with Highcharts 5.0.10World's Opinion About the Blueberries(Source: entertheleague.net)Least FavorableMost FavorableFranceGreeceMonacoItalyNetherlandsCyprusLuxembourg0123456-5-4.5-4-3.5-3-2.5-2-1.5-1-0.500.511.522.533.544.55
Copy
<div class="container-graph" id="bar-chart-two-sided"></div>

Line Charts

Basic - Hard Line

Created with Highcharts 5.0.10Wind speed (m/s)Forecast: Closing contracts(Source: thewikiinvest.org)StoreOne.comStoreTwo.com30.Dec30. Dec1. Jan3. Jan5. Jan7. Jan9. Jan11.Jan11. Jan13.Jan13. Jan15.Jan15. Jan17.Jan17. Jan19.Jan19. Jan21.Jan21. Jan23.Jan23. Jan25.Jan25. Jan27.Jan27. Jan29.Jan29. Jan31.Jan31. Jan2. Feb4. Feb6. Feb8. Feb10.Feb10. Feb12.Feb12. Feb14.Feb14. Feb16.Feb16. Feb18.Feb18. Feb100125150175200225250275
Copy
<div class="container-graph" id="line-chart-hard-line"></div>

Basic - Soft Line

Created with Highcharts 5.0.10Price U.S. DollarsProduct price history(Source: BuyMore-LiveBetter.com)StoreOne.comStoreTwo.comSepOktNovDecJanFebMarAprMaj100125150175200225250275
Copy
<div class="container-graph" id="line-chart-soft-line"></div>

Line with markers

Created with Highcharts 5.0.10TemperatureMonthly Average Temperature(Source: WorldClimate.com)TokyoNew YorkLondonBerlinJanFebMarAprMajJunJulAugSepOktNovDec-5051015202530
Copy
<div class="container-graph" id="line-with-markers"></div>

Scatter plots

Created with Highcharts 5.0.10Estimated Range (miles)Estimated range vs. temperature(Source: WorldClimate.com)201420152016201725507510020406080100120
Copy
<div class="container-graph" id="scatter-plots-chart"></div>
Created with Highcharts 5.0.10Estimated Range (miles)Estimated range vs. temperature(Source: WorldClimate.com)201420152016201725507510020406080100120
Copy
<div class="container-graph" id="scatter-plots-chart-2"></div>

Table charts

Name Health Label Size Timeout Status
www.visma.com
Created with Highcharts 5.0.10
60 12.358 12
www.visma.se
Created with Highcharts 5.0.10
90 9.701 2
www.visma.no
Created with Highcharts 5.0.10
90 9.701 2
Name Health Label Size Timeout
www.visma.fi
Created with Highcharts 5.0.10
13 19.453 19
www.visma.dk
Created with Highcharts 5.0.10
17 799 4
www.visma.uk
Created with Highcharts 5.0.10
34 9.322 6
Name Health Label Size Timeout
www.visma.ro
Created with Highcharts 5.0.10
23 358 14
www.visma.ru
Created with Highcharts 5.0.10
14 10.131 12
www.visma.lt
Created with Highcharts 5.0.10
43 5.321 5
Copy
<!-- Spline chart -->
<table class="table table-line-chart">
   <thead>
      <tr>
         <th>Name</th>
         <th>Health</th>
         <th>Label</th>
         <th>Size</th>
         <th>Timeout</th>
         <th>Status</th>
      </tr>
   </thead>
   <tbody>
      <tr class="chart-ascending">
         <td><a>www.visma.com</a></td>
         <td class="text-center" data-sparkline="71, 59, 66, 33, 54, 71, 59, 66, 25, 33, 54"></td>
         <td>60</td>
         <td>12.358</td>
         <td>12</td>
         <td class="text-center"><span class="graph-arrow"></span></td>
      </tr>
      <tr class="chart-symmetrical">
         <td><a>www.visma.se</a></td>
         <td class="text-center" data-sparkline="61, 51, 66, 39, 54, 61, 79, 67, 25, 33, 54"></td>
         <td>90</td>
         <td>9.701</td>
         <td>2</td>
         <td class="text-center"><span class="graph-arrow"></span></td>
      </tr>
      <tr class="chart-descending">
         <td><a>www.visma.no</a></td>
         <td class="text-center" data-sparkline="27, 40, 34, 42"></td>
         <td>90</td>
         <td>9.701</td>
         <td>2</td>
         <td class="text-center"><span class="graph-arrow"></span></td>
      </tr>
   </tbody>
</table>

<!-- Column chart -->
<table class="table table-column-chart">
   <thead>
      <tr>
         <th>Name</th>
         <th>Health</th>
         <th>Label</th>
         <th>Size</th>
         <th>Timeout</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td><a>www.visma.fi</a></td>
         <td class="text-center" data-sparkline="12, -11, -15, -13, 14 ; column"></td>
         <td>13</td>
         <td>19.453</td>
         <td>19</td>
      </tr>
      <tr>
         <td><a>www.visma.dk</a></td>
         <td class="text-center" data-sparkline="19, 17, 15, -13, 14 ; column"></td>
         <td>17</td>
         <td>799</td>
         <td>4</td>
      </tr>
      <tr>
         <td><a>www.visma.uk</a></td>
         <td class="text-center" data-sparkline="21, -18, 13, -12, -7 ; column"></td>
         <td>34</td>
         <td>9.322</td>
         <td>6</td>
      </tr>
   </tbody>
</table>

<!-- Line chart -->
<table class="table table-line-chart">
   <thead>
      <tr>
         <th>Name</th>
         <th>Health</th>
         <th>Label</th>
         <th>Size</th>
         <th>Timeout</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td><a>www.visma.ro</a></td>
         <td class="text-center" data-sparkline="52, 21, 35, 43, 64, 24, 12, -15, -25, 25, 44, 52 ; line"></td>
         <td>23</td>
         <td>358</td>
         <td>14</td>
      </tr>
      <tr>
         <td><a>www.visma.ru</a></td>
         <td class="text-center" data-sparkline="19, -17, -15, 23, 34 ; line"></td>
         <td>14</td>
         <td>10.131</td>
         <td>12</td>
      </tr>
      <tr>
         <td><a>www.visma.lt</a></td>
         <td class="text-center" data-sparkline="11, 29, 65, 18, 13, -35, 27 ; line"></td>
         <td>43</td>
         <td>5.321</td>
         <td>5</td>
      </tr>
   </tbody>
</table>

Circle Progress Graphs

Dependencies

For this type of chart is recommended to include solid-gauge.js

Created with Highcharts 5.0.10Highcharts.com
46 %Tasks Completed
Copy
<div class="container-graph" id="circle-progress-graph"></div>

Line Progress Graphs

Created with Highcharts 5.0.10Line Progress Graphs(Source: entertheleague.net)85 h85 h31 h31 h54 h54 h25 h25 h62 h62 hConceptingDesigningImplementationProdctionOverall
Copy
<div class="container-graph" id="line-progress-graph"></div>

Area charts

Basic

Created with Highcharts 5.0.10Nuclear weapon statesNuclear Stockpiles(Source: thebulletin.metapress.com)USARussiaRomania19401945195019551960196519701975198019851990199520002005010k20k30k40k50k
Copy
<div class="container-graph" id="area-charts"></div>

Splited

Created with Highcharts 5.0.10Temperature anomalyYearly Average Temperature Oslo(Source: thebulletin.metapress.com)Above 0JanFebMarAprMayJunJulAug-40-2002040
Copy
<div class="container-graph" id="area-charts-split"></div>

Stacked

Created with Highcharts 5.0.10PercentEnergy Consumtion Predictions(Source: safeenergy.eu)SolarNatural GasElectricityHydroNuclear19001901190219031904190519061907010203040506070Highcharts.com
Copy
<div class="container-graph" id="area-charts-stack"></div>

Pie charts

Created with Highcharts 5.0.10Browser market shares at a specific website, 2014(Source: analytics.google.com)FirefoxInternet ExplorerChromeSafariOperaOtherHighcharts.com
Copy
<div class="container-graph" id="pie-chart"></div>

Doughnut charts

Created with Highcharts 5.0.10Browser market shares at a specific website, 2014(Source: analytics.google.com)FirefoxInternet ExplorerChromeSafariOperaOtherHighcharts.com
Copy
<div class="container-graph" id="doughnut-chart"></div>

Gauges

Dependencies

For this type of chart is recommended to include solid-gauge.js

Primary

Created with Highcharts 5.0.10mi/h3333Example 10102030405060Highcharts.com
Created with Highcharts 5.0.10mi/h47.0547.05Example 20102030405060Highcharts.com
Copy
<div class="container-graph" id="gauges-chart-primary-example1"></div>

<div class="container-graph" id="gauges-chart-primary-example2"></div>

Secondary

Created with Highcharts 5.0.10Example 10200Highcharts.com
150.0
km/h
Created with Highcharts 5.0.10Example 204.8Highcharts.com
3.9
*1000/min
Created with Highcharts 5.0.10Example 30200Highcharts.com
80.0
km/h
Created with Highcharts 5.0.10Example 406Highcharts.com
4.2
*1000/min
Created with Highcharts 5.0.10mi/h47.0547.05Example 5060Highcharts.com
Created with Highcharts 5.0.10mi/h6.96.9Example 60123456789101112Highcharts.com
Copy
<div class="container-graph" id="gauges-chart-secondary-example1"></div>

<div class="container-graph" id="gauges-chart-secondary-example2"></div>

<div class="container-graph" id="gauges-chart-secondary-example3"></div>

<div class="container-graph" id="gauges-chart-secondary-example4"></div>

<div class="container-graph" id="gauges-chart-secondary-example5"></div>

<div class="container-graph" id="gauges-chart-secondary-example6"></div>