Highcharts Demo

author(s): Torstein Hønsi

by Nhi Nguyen

HTML

<!-- <script src="https://code.highcharts.com/highcharts.js"></script> -->
<script src="https://code.highcharts.com/stock/7.1.2/highstock.js"></script>
<script src="https://code.highcharts.com/7.1.2/modules/xrange.js"></script>
    <script src="https://code.highcharts.com/7.1.2/modules/windbarb.js"></script>
    <script src="https://code.highcharts.com/7.1.2/modules/exporting.js"></script>
<div id="container" class="chart"></div>

CSS

.chart:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

.chart:-moz-full-screen {
  width: 100%;
  height: 100%;
}

.chart:-ms-fullscreen {
  width: 100%;
  height: 100%;
}

.chart:fullscreen {
  width: 100%;
  height: 100%;
}

.chart {
  width: 800px;
  height: 400px;
}
.chart .highcharts-title{
  font-size:140px;
}

JavaScript

Highcharts.chart('container', {
  chart: {
    spacingTop: 20,
    //height: 400
  },
subtitle:{
	text:'<span>Hello</span>',
  useHTML:true
},
  credits: {
    enabled: false
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ]
  },

  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0,
      135.6, 148.5, 216.4, 194.1, 95.6, 54.4
    ]
  }],

  navigation: {
    buttonOptions: {
      theme: {
        // Good old text links
        style: {
          color: '#039',
          textDecoration: 'underline'
        }
      }
    }
  },

  responsive: {
    rules: [{
      condition: {
        minWidth: 1600,
      },
      chartOptions: {
        title: {
          style: {
            color: 'red',
            fontSize: 10,
          }
        },
        subtitle:{
        	style:{
          color:'orange',
          fontSize:80,
          }
        }
      }
    },
    {
      condition: {
        minWidth: 1600,
        //maxWidth:1599
      },
      chartOptions: {
        title: {
          style: {
            color: 'red',
            //fontSize: 100,
          }
        },
        subtitle:{
        	style:{
          color:'orange',
          fontSize:80,
          }
        },
        xAxis: {
                            title: {
                                style: {
                                    fontSize: '16px',
                                }
                            },
                            labels: {
                                style: {
                                    fontSize: '16px',
                                }
                            }
                        },
                        yAxis: {
                            title: {
                                style: {
                                    fontSize: '16px',
                                }
                            },
                            labels: {
   ...