Highcharts Demos

One stop solution for perfect admin dashboard!

Toggle Code!
Dynamic Chart Spline updating each second
                                                        
<div id="dynamic-update" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<!-- ========== JS ========== -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/funnel.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="js/highcharts/dynamic-update-value-chart.js" charset="utf-8"></script>
Column with rotated labels
                                                        
<div id="column-with-related-label" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<!-- ========== JS ========== -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/funnel.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="js/highcharts/column-with-rotated-label.js" charset="utf-8"></script>
3D charts
                                                        
<div id="3d-column" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<!-- ========== JS ========== -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/funnel.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="js/highcharts/3d-column.js" charset="utf-8"></script>
Dual axes, line and column
                                                        
<div id="dual-axis-line-column" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<!-- ========== JS ========== -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/funnel.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="js/highcharts/dual-axis-line-column.js" charset="utf-8"></script>
Pie with gradient fill
                                                        
<div id="pie-with-gradient-fill" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<!-- ========== JS ========== -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/funnel.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="js/highcharts/pie-with-gradient-fill.js" charset="utf-8"></script>
3D Pie
                                                        
<div id="3d-pie" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<!-- ========== JS ========== -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/funnel.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="js/highcharts/3d-pie.js" charset="utf-8"></script>
Funnel chart
                                                        
<div id="funnel-chart" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<!-- ========== JS ========== -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/funnel.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="js/highcharts/funnel-chart.js" charset="utf-8"></script>
Spiderweb
                                                        
<div id="spiderweb" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<!-- ========== JS ========== -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/funnel.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="js/highcharts/spiderweb.js" charset="utf-8"></script>