Highcharts Stock Demo

author(s): Torstein Hønsi

by anikettiwari

HTML

<div id="grafico"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://www.highcharts.com/samples/data/usdeur.js"></script>

JavaScript

$(function() {
     $('#grafico').highcharts({
       chart: {
         type: 'bar',
         style: {
           fontFamily: 'Damion',
           fontSize: 17
         },
         events: {
           load: function() {
             let categoryHeight = 15;
             this.update({
               chart: {
                 height: categoryHeight * this.pointCount + (this.chartHeight - this.plotHeight)
               }
             })
           }
         }
       },
       title: {
         text: 'Cantidad de notas en total : 70',
         style: {
           fontSize: 25
         }
       },
       xAxis: {
         categories: ["Bases de datos", "C#", "Dise\u00f1o Web", "GitHub", "Guitarra", "Java", "Javascript", "Juegos", "M\u00fasica", "PC", "Peliculas", "Personal", "PHP", "Python", "Series", "Trabajo", "Youtube", "Test"],
         labels: {
           style: {
             fontSize: 17
           }
         },
         title: {
           text: 'Categorias'
         }
       },
       yAxis: {
         min: 0,
         title: {
           text: 'Notas',
           align: 'high'
         },
         labels: {
           style: {
             fontSize: 17
           },
           overflow: 'justify'
         }
       },
       tooltip: {
         useHTML: true,
         style: {
           fontSize: 17
         },
         formatter: function() {
           return 'Cantidad de notas: ' + this.point.y;
         }
       },
       plotOptions: {
         series: {
           dataLabels: {
             //enabled:true,
           },
           events: {
             legendItemClick: function() {
               return false;
             }
           }
         }
       },
       legend: {
         reversed: true,
         itemStyle: {
           fontSize: 12
         }
       },
       credits: {
         enabled: false
       },
       series: [{
         name: 'Notas',
         //pointWidth: 50,
         data: [{
           "name": "Bases de datos",
         ...