JSFiddle - React, Tailwind, and code Playground

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;               
             border-radius: 10px;               
             border: 1px solid #dbdbdb;
             overflow:auto;
             position:relative"></div>

CSS

/*
     * Legal Disclaimer
     *
        print '\n', 'Note that the webfonts share the TT sources'
     * These Fonts are licensed for unlimited use on domains and their subdomains of The Kantar Group.
     * It is illegal to download or use them on other websites.
     *
     * While the @font-face statements below may be modified by the client, this
     * disclaimer may not be removed.
     *
     * Lineto.com, 2016
     */
    
    
    
    @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:...

JavaScript

(input=>{
var chartWrapper=$("<div></div>").appendTo("#container").attr("id","chartWrapper");
  var chartDiv = $("<div></div>").appendTo("#chartWrapper").attr("id", "chartDiv");
     
  $("#chartDiv").highcharts({
  chart:{
  type:'line',
  marginLeft:140,
  marginRight:50
  },
  title:{
  text:input.title,
  align: 'left',
  style:{
  width: '1180px',
height: '42px',
color: '#000000',
'font-family': "Kantar Brown",
'font-size': '32px',
'font-weight': '300'
  }
  },
  subtitle:{
  text:input.subTitle,
   align: 'left',
  style:{
  width: '1180px',
height: '42px',
color: '#bd9b08',
'font-family': "Kantar Brown",
'font-size': '24px',
'font-weight': '700'
  }
  },
   xAxis: [{
  
            categories: input.waves,
            tickColor: '#dbdbdb',
            tickLength: 6,
            lineWidth: 0,
            tickmarkPlacement: "On",
            labels: {
                style: {
                    fontSize: '12px',
                    color: '#575757',
                    fontFamily: 'KantarBrownWeb-Light',
                }
            }
        }],
  yAxis: {
  
    title: "",
 min: 0,
 max: 100,
            
  lineColor: '#dbdbdb',
  tickInterval: 10,
    tickWidth: 0,
    lineWidth: 1,
   
  
  },
    series: input.chartData.data
  
})
})

({
"title":'Brand Fluency Across Executions Over Time',
"subTitle":'Brand Name - Ad Name',

 "waves": ["Jan14","Feb14","Mar14","Apr14","May14","Jun14","July 14","Aug14","Sep14","OCT14"],
"norm":39,
"top25Norm":49,

"chartData":{
"data":[
{
name:'Factor 1',
data:['',85,60,70,0,78,'',51,63,72],
color:'#f59031'
},
{
name:'Factor 2',
data:[60,85,70,78,71,89,54,63,98,61],
color:'#00b6ed'
},
{
name:'Factor 3',
data:[0,60,20,53,51,69,49,59,35,30],
color:'#86c649'
},
{
name:'Factor 4',
data:[70,85,60,75,74,80,45,59,68,54],
color:'#84cee2'
},
{
name:'Factor 5',
data:[51,57,45,'',45,52,38,38,53,48],
color:'#f6be00'
}
]
}
})