jQuery addClass example

Change class name on click in jQuery

by prateekbansal07

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Notes: Unsupported diagnoses represent CMS hierarchical condition categories that were not
validated by medical records during contract-level RADV audits. CMS defines coding intensity as the
average change in the disease component of the contract’s risk scores for all available years.
    </p>
</figure>

CSS

#container {
    height: 400px; 
}

.highcharts-figure, .highcharts-data-table table {
    min-width: 310px; 
    max-width: 800px;
    margin: 1em auto;
}

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'bubble',
        plotBorderWidth: 1,
        zoomType: 'xy'
    },
credits:{
enabled:false
},
    title: {
        text: ''
    },
subtitle: {
        text: 'Percentage of Unsupported Diagnoses within Medicare Advantage (MA) Contracts by the Centers for Medicare & Medicaid Services (CMS) Coding Intensity,2007 Risk Adjustment Data Validation (RADV) Audits'
    },

    xAxis: {
        gridLineWidth: 1,
        accessibility: {
            rangeDescription: 'Range: 0 to 100.'
        },
         title:{
        text: 'Code Intensity'
    },
     plotLines: [{
            color: 'black',
            dashStyle: 'dot',
            width: 2,
            value: 20,
            label: {
                rotation: 0,
                y: 15,
                style: {
                    fontStyle: 'italic'
                },
                text: ''
            },
            zIndex: 3
        },{
            color: 'black',
            dashStyle: 'dot',
            width: 2,
            value: 40,
            label: {
                rotation: 0,
                y: 15,
                style: {
                    fontStyle: 'italic'
                },
                text: ''
            },
            zIndex: 3
        }],
    },

    yAxis: {
        startOnTick: false,
        endOnTick: false,
        title:{
        text: 'Rate of unsupported diagnosis'
    },
        accessibility: {
            rangeDescription: 'Range: 0 to 100.'
        }
    },

    series: [{
    		name:'MA Contracts with low coding intensity (Rate of unsupported diagnosis=24.9%)',
        data: [
         [4,62,8],
[16,49,8],
[6,72,8],
[18,19,8],

[1,42,8],
[5,62,8],

 
        ],
        marker: {
            fillColor: {
                radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
                stops: [
                    [0, 'rgba(255,255,255,0.5)'],
                    [1, 'white']
                ]
            },
           ...