jQuery addClass example

Change class name on click in jQuery

HTML

<script src="https://adexfulfillment.com/oracle/mvc/public/js/jqwidgets/jqxcore.js"></script>
<script src="https://adexfulfillment.com/oracle/mvc/public/js/jqwidgets/jqxloader.js"></script>
<link rel="stylesheet" href="https://adexfulfillment.com/oracle/mvc/public/css/jqwidgets/jqx.base.css">
<script src="https://adexfulfillment.com/oracle/mvc/public/js/jqwidgets/jqxchart.js"></script>
<script src="https://adexfulfillment.com/oracle/mvc/public/js/jqwidgets/jqxdraw.js"></script>
<script src="https://adexfulfillment.com/oracle/mvc/public/js/jqwidgets/jqxdata.js"></script>
<div id="inventory_chart" style="width: 600px; height: 800px;"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

$(document).ready(function() {
  var sampleData = [{
      Day: 'Monday',
      Running: 30,
      Swimming: 0,
      Cycling: 25
    },
    {
      Day: 'Tuesday',
      Running: 25,
      Swimming: 25,
      Cycling: 0
    },
    {
      Day: 'Wednesday',
      Running: 30,
      Swimming: 0,
      Cycling: 25
    },
    {
      Day: 'Thursday',
      Running: 35,
      Swimming: 25,
      Cycling: 45
    },
    {
      Day: 'Friday',
      Running: 0,
      Swimming: 20,
      Cycling: 25
    },
    {
      Day: 'Saturday',
      Running: 30,
      Swimming: 0,
      Cycling: 30
    },
    {
      Day: 'Sunday',
      Running: 60,
      Swimming: 45,
      Cycling: 0
    }
  ];
  // prepare jqxChart settings
  var settings = {
    title: "Fitness & exercise weekly scorecard",
    description: "Time spent in vigorous exercise by activity",
    enableAnimations: true,
    showLegend: true,
    padding: {
      left: 5,
      top: 5,
      right: 5,
      bottom: 5
    },
    titlePadding: {
      left: 90,
      top: 0,
      right: 0,
      bottom: 10
    },
    source: sampleData,
    categoryAxis: {
      text: 'Category Axis',
      textRotationAngle: 0,
      dataField: 'Day',
      showTickMarks: true,
      tickMarksInterval: 1,
      tickMarksColor: '#888888',
      unitInterval: 1,
      showGridLines: false,
      gridLinesInterval: 1,
      gridLinesColor: '#888888',
      axisSize: 'auto'
    },
    colorScheme: 'scheme03',
    seriesGroups: [{
      type: 'stackedcolumn',
      columnsGapPercent: 100,
      seriesGapPercent: 5,
      showLabels: true,
      valueAxis: {
        unitInterval: 10,
        minValue: 0,
        maxValue: 100,
        displayValueAxis: true,
        description: 'Time in minutes',
        axisSize: 'auto',
        tickMarksColor: '#888888'
      },
      series: [{
          dataField: 'Running',
          displayText: 'Running'
        },
        {
          dataField: 'Swimming',
          displayText: 'Swimming'
     ...