Highcharts: A 10 minutes overview.

A Norway-based company 'Highsoft' offering charting library written in pure javascript. Its a major addon to web applications requires interactive charts. Currently they're supporting many chart types including line, area, column, bar, pie, scatter, bubble, gauge, spline, areaspline and polar etc.

by arun prasher

HTML

<!DOCTYPE html>
<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <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/modules/export-data.js"></script>
   </head>
   <body>
      <div id = "container" style = "width: 726px; height: 700px; margin: 100 auto"></div>
      
   </body>
</html>

CSS

.wrapper {
            display: table;
            width: 50%;
        }
        .element {
            display: table-cell;
            width: 50%;
        }
        #chart {
            display: table-cell;
            position:absolute;
            width:50%;
        }
        .legend {
            height: 300px;
            vertical-align: middle;
            display: table-cell;
            margin-left: 20%
        }

JavaScript

$(document).ready(function() {

            Highcharts.setOptions({
              colors: ['#A8E6CE','#DCEDC2','#FFD3B5','#FFAAA6','#FF8C94','#9DE0AD','#45ADA8','#547980',
              '#594F4F','#A8A7A7','#CC527A','#E8175D']
            });

            Highcharts.chart('container', {
                chart: {
                  borderColor: '#cccccc',
                  borderWidth: 2,
                  marginTop: 43,
                  type: 'column',
                },
                legend: {
                  borderWidth: 2
                },
                title: {
                    text: 'Salary And Expenditure/Savings Ratio'
                },
                xAxis: {
                    categories: ['Louie','Sam','Callum','Rory','Harvey','Holly','Annabelle','Eleanor','Eliza','Amber'],
                    labels: {
                      formatter: function () {
                        return "term " + this.value;
                      },
                      style: {
                        fontWeight: 'bold',
                        color:'red'
                      }
                    }
                },
                yAxis: {
                    labels: {
                      format: '{value}',
                      style: {
                        fontWeight: 'bold',
                        color:'red'
                      },
                      formatter:function(){
                            return "$" + this.value;
                      }
                    },
                    title: {
                        text: 'Total Salary'
                    },
                    stackLabels: {
                       enabled: true,
                       formatter:function(){
                          return "$" + this.total;
                      },
                      style: {
                        fontWeight: 'bold',
                        color:'green'
                      },
                    }

                },

           ...