HighCharts Remove n Update Point

by Suman Kumar

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>
<script src="https://code.highcharts.local/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 600px; height: 300px; margin: 0 auto"></div>
<label class="checkbox"><input type="checkbox" data-val="X"/>X</label>
<label class="checkbox"><input type="checkbox" data-val="Y"/>Y</label>
<label class="checkbox"><input type="checkbox" data-val="Z"/>Z</label>
<hr/>
X Axis categories on chart object: <label class="print">A</label>

JavaScript

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        xAxis: {
            categories: ["A"]
        },
        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },

        series: [{
            id: 's_0',
            name: 's_0',
            data: [10],
            stack: '1'
        }, {
            id: 's_1',
            name: 's_1',
            data: [10],
            stack: '2'
        }, {
            id: 's_2',
            name: 's_2',
            data: [10],
            stack: '2'
        }, {
            id: 's_3',
            name: 's_3',
            data: [10],
            stack: '3'
        }]
    });
    $("input[type=checkbox]").on("click", function(e){
        var tmp_pl = $.trim($(this).data("val"));
        var cat_name = $(this).data("val");
        
        //If the checkbox checked then add new categories and 
        //points to series then redraw
 
        //Else exclude category name from xaxis and
        //remove data from series
        if ($(this).is(':checked')){
            var categories = chart.xAxis[0].categories;
            categories.push(cat_name);
            chart.xAxis[0].setCategories(categories);
            chart.get("s_0").addPoint(11);
            chart.get("s_1").addPoint(11);
            chart.get("s_2").addPoint(11);
            chart.get("s_3").addPoint(11);
    
            //chart.redraw();
        } else {
            var cat;
            var data_series = [];
            $.each(chart.series, function(sKey, sVal){
            
                var j = sVal.data.length - 1;
                var isRemoved = false;
                var dt;
                while(!isRemoved && j >= 0) {
                    var dVal = sVal.data[j];
                    if (dVal.category === cat_name) {
                        dVal.remove();
                         sVal.xIncrement --;
            ...