jQuery addClass example

Change class name on click in jQuery

by moshfeu

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div class="ppg-wrapper">
  <div id="ppg"></div>
</div>

CSS

#ppg {
    max-width: 800px;
    min-width: 320px;
    height: 400px;
    width: 400px;
}

.ppg-wrapper {
  overflow-y: hidden;
  height: 400px;
}

JavaScript

var xValues = [];
 xValues = [1,4,3,9,3,4,4,6,4,5,3,4,3,3,1,3,2,3,2,3,4,4,3,3,4,3,5,3,6,7,3,2,5,7,4,6,7,3,6,7,4,7,4,7,3,2,5,6,7,4,3,4,6,6,7,4,6,6,7,3,6,7,3,2,4,5,6,5,9,8,4,6,2,1,5,8,5,8,2,6,3,8,4,7,3,6,1,5,8,0,2,4,7,5,8,3,7,9,3,7];
 
const drawAnimationDuration = 5000;

Highcharts.chart('ppg', {
    chart: {
        type: 'line',
        scrollablePlotArea: {
            minWidth: 800,
            scrollPositionX: 0
        }
    },
    title: {
        text: 'ECG Data'
    },
    subtitle: {
        text: ''
    },
    xAxis: {    
        crosshair: false
    },
    yAxis: {
        title: {
            text: 'Peaks'
        }
    },
   tooltip: {
        enable: false
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: '',
        lineWidth: 2,
        data: xValues,
         animation: {
           duration: drawAnimationDuration
         }
    }]
});

setTimeout(() => {
	$('.highcharts-scrolling').animate({
    scrollLeft: $('.highcharts-container').width()
  }, 10000, 'linear');
}, drawAnimationDuration)