Highcharts Demo

author(s): Torstein Hønsi

by Kesav Telaprolu

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script src="https://code.highcharts.com/6.1.1/highcharts.js"></script>

<div id="container" style="width:1240px;height:688px;box-sizing: border-box;border: 1px solid #ccc;border-radius: 10px"></div>

CSS

@font-face {
   font-family: "KantarBrownWeb-LightItalic";
   src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.eot");
   src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.eot?#iefix") format("embedded-opentype"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.woff2") format("woff2"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.woff") format("woff");
   font-weight: normal;
   font-style: normal;
 }

 @font-face {
   font-family: "KantarBrownWeb-BoldItalic";
   src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.eot");
   src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.eot?#iefix") format("embedded-opentype"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.woff2") format("woff2"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.woff") format("woff");
   font-weight: normal;
   font-style: normal;
 }

 @font-face {
   font-family: "KantarBrownWeb-Italic";
   src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.eot");
   src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.eot?#iefix") format("embedded-opentype"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.woff2") format("woff2");
   font-weight: normal;
   font-style: normal;
 }

 @font-face {
   font-family: "KantarBrownWeb-Thin";
   src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Thin.eot");
   src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Thin.eot?#iefix") format("embedded-opentype"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Thin.woff2")...

JavaScript

( input => {

    //TITLE TEMPLATE
    
    var titleHtml =
      `<div id="title"></div>
       <div id="subTitle"></div>
       <div id="chartTitle"></div>
       </div>`;
    
    
    //CHART TEMPLATE
    var chartHtml = `<div id="chartContainer" class ="chartContainer"></div>`;
    
    //HTML AND CSS
    
    $("#container").append(titleHtml);
    $('.chartTitles').css({
      "margin-top": "35px"
    })
    $('#title').html(input.commentary_title);
    $("#title").css({
      "margin": "35px 30px 0px 30px",
      "color": "#000000",
      "font-size": "32px",
      "font-family": "KantarBrownWeb-Light",
      "padding": "5px 0px"
    })
    $('#subTitle').html(input.commentary_subtitle);
    $("#subTitle").css({
      "margin": "0px 30px 0px 30px",
      "padding": "9px  0px",
      "color": "#e5007e",
      "font-size": "24px",
      "font-family": "KantarBrownWeb-Bold"
    })
    $('#chartTitle').html(input.chart_title);
    $("#chartTitle").css({
      "margin": "0px 30px 0px 30px",
      "color": "#000000",
      "font-size": "17px",
      "font-weight": "700",
      "font-family": "KantarBrownWeb-Bold",
      "padding": "9px 0px"
    })
    
    
    //CHART AND CSS
    
    $("#container").append(chartHtml);
    $(".chartContainer").css({
      "height": "440px",
      "width": '1190px',
      "margin": "0px 30px 10px 30px",
    });
    Highcharts.chart('chartContainer', {
        chart: {
            type: 'area',
            styledMode: true,
            height: 520,
            width: 1180,
            marginTop: 25,        
            marginLeft: 25,
            marginBottom:65,
        },
        title: {
            text: null
        },
        subtitle: {
            text: null
        },
        xAxis: {    	 	
            categories: input.chart_data.pricepoint_value,
            tickLength: 5,
            tickWidth: 2,
            lineWidth:0,
            tickmarkPlacement: "On",   
            left:30,
            labels: {        				
 ...