jQuery addClass example

Change class name on click in jQuery

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>
<head>
    <style>
        /*
 * 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=>{

   
//TITLE TEMPLATE

var titleHtml = 
`
<div class="chartTitles">

<div id="title"></div>
<div id="subTitle"></div>
<div id="chartTitle"></div>

</div>`;

var chartHtml = 
`
<div id="chartContainer">

</div>

`;


//LEGEND TEMPLATE

var legendHtml = 
`
<div id="legendWrapper">     
<div style="width:48px;height:48px;box-sizing:border-box;margin: 5px auto;">
<span id="left01" class="legend" style="border:2px solid #F59031;"><span id="left" class="legend-name"  style="display: block;position: absolute;left: -150px;top: 4px;"> ${input.brandSeries[0].Measures[3].name}</span></span>
<span id="right02"  class="legend" style="border:2px solid #7a2280;background:#7a2280;"><span id="left" class="legend-name" style="display: block;position: absolute;left: -150px;top: 28px;"> ${input.brandSeries[0].Measures[2].name}</span></span>
<span id="left03" class="legend" style="border:2px solid #F6BE00;"><span id="Right" class="legend-name" style="display: block;position: absolute;left: 75px;width: 150px;top: -18px;"> ${input.brandSeries[0].Measures[0].name} </span></span>
<span id="right04"  class="legend" style="border:2px solid #dbdbdb;"><span id="Right" class="legend-name" style="display: block;position: absolute;left: 52px;width: 250px;top: 6px;"> ${input.brandSeries[0].Measures[1].name} </span></span>
</div>

</div>
`; 

//HTML AND CSS

$("#container").append(titleHtml);

$('.chartTitles').css({
"margin-top": "35px"
})
$('#title').html(input.title);
$("#title").css({
"margin":"0px 30px 0px 30px",
"color":"#000000",    
"font-size":"32px",
"font-family":"KantarBrownWeb-Light",
"padding":"5px 0px"
})
$('#subTitle').html(input.subTitle); 
$("#subTitle").css({
"margin":"0px 30px 0px 30px",
"line-height":"32px",
"padding":"9px  0px",
"color":"#e5007e",
"font-size":"24px",
"font-family":"KantarBrownWeb-Bold"
})
$('#chartTitle').html(input.chartTitle);
$("#chartTitle").css({
"margin":"0px 30px 0px...