jQuery addClass example

Change class name on click in jQuery

by halloleo

HTML

<div>
  <div>
    <input type="radio" id="legend-on" name="legend" value="on" checked>on</input>
    <input type="radio" id="legend-off" name="legend" value="off">off</input>
  </div>
  <div id="container"></div>
</div>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>

JavaScript

chart = Highcharts.chart('container', {
  chart: {
    events: {
      load: function() {
        navigatorUpdate(this, this.userOptions.data.rows)
      }
    },
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    tickWidth: 1,
    tickLength: -50
  },

  data: {
    rows: [
      ['Categories', 'Height'],
      ['Jan', '29.9'],
      ['Feb', '71.5'],
      ['Mar', '106.4'],
      ['Apr', '129.2'],
      ['May', '144.0'],
      ['Jun', '176.0'],
      ['Jul', '135.6'],
      ['Aug', '148.5'],
      ['Sep', '216.4']
    ]
  },

  navigator: {
    enabled: true,
  },

});

function extract_categories(data) {
  return data.map(function(row) {
    return row[0];
  }).slice(1);
}

function navigatorUpdate(chart, data) {
  chart.update({
    xAxis: {
      range: extract_categories(data).length,
    },
    navigator: {
      xAxis: {
        categories: extract_categories(data),
      }
    },
  })
}

layoutUpdate(chart, false) // just make sure we are in the legend-on stage

// Wire the legend (layout) radio buttons
$('#legend-off').click(function() {
  layoutUpdate(chart, true);
});

$('#legend-on').click(function() {
  layoutUpdate(chart, false);
});

function layoutUpdate(chart, secondary) {
  if (secondary) {
    // Secondary (print) layout
    chart.update({
      legend: {
        enabled: false
      },
      chart: {
        style: {
          fontFamily: 'sans-serif'
        }
      },
      navigator: {
        enabled: false,
      },
      xAxis: {
        gridLineWidth: 0,
        labels: {
          style: {
            fontWeight: 'medium',
          },
          rotation: -90
        }
      },
      yAxis: Array(5).fill({ // I guess we won't have more than 5 y-axes...
        gridLineWidth: 0,
        lineWidth: 1,
        labels: {
          style: {
            fontWeight: 'medium',
          }
        }
      }),
    });
  } else {
    // Primary (screen) layout
   ...