How we can redraw the chart keeping the occurred events on click in Highcharts?

Question

I have data like this:

var data = [{
    x: Date.UTC(1951, 5, 22),
    name: 'First dogs in space',
    label: 'fds',
    dataLabels: {
        allowOverlap: false,
        format: '<span style="color:{point.color}">● </span><span style="font-weight: bold;" > ' +
            '</span><br/>{point.label}'
    },
}, {
    x: Date.UTC(1957, 9, 4),
    name: 'First artificial satellite',
    label: 'First artificial satellite',
}, {
    x: Date.UTC(1959, 0, 4),
    name: 'First artificial satellite to reach the Moon',
    label: 'First artificial satellite to reach the Moon',
}, {
    x: Date.UTC(1961, 3, 12),
    name: 'First human spaceflight',
    label: 'First human spaceflight',
}, {
    x: Date.UTC(1966, 1, 3),
    name: 'First soft landing on the Moon',
    label: 'First soft landing on the Moon',
}, {
    x: Date.UTC(1969, 6, 20),
    name: 'First human on the Moon',
    label: 'First human on the Moon',
}, {
    x: Date.UTC(1971, 3, 19),
    name: 'First space station',
    label: 'First space station',
}, {
    x: Date.UTC(1971, 11, 2),
    name: 'First soft Mars landing',
    label: 'First soft Mars landing',
}, {
    x: Date.UTC(1976, 3, 17),
    name: 'Closest flyby of the Sun',
    label: 'Closest flyby of the Sun',
}, {
    x: Date.UTC(1978, 11, 4),
    name: 'First orbital exploration of Venus',
    label: 'First orbital exploration of Venus',
}, {
    x: Date.UTC(1986, 1, 19),
    name: 'First inhabited space station',
    label: 'First inhabited space station',
}, {
    x: Date.UTC(1989, 7, 8),
    name: 'First astrometric satellite',
    label: 'First astrometric satellite',
}, {
    x: Date.UTC(1998, 10, 20),
    name: 'First multinational space station',
    label: 'First multinational space station',
}];

Highcharts.chart('container', {
                chart: {
                    // zoomType: 'x',
                    type: 'timeline'
                },
                xAxis: {
                    type: 'datetime',
                    max: 5,
                    visible: false,
                },
                scrollbar: {
                    enabled: data.length < 10 ? false : true
                },
                yAxis: {
                    gridLineWidth: 1,
                    title: null,
                    labels: {
                        enabled: false
                    }
                },
                plotOptions: {
                    series: {
                        cursor: 'pointer',

                    }
                },
                legend: {
                    enabled: false
                },

                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                // colors: [fr_color,nfr_color],
                colors: [
                    '#FFC160',
                    '#ff9993',
                ],
                tooltip: {
                    style: {
                        width: 300
                    }
                },

                series: [{
                    point: {
                        events: {
                            click: function(data) {
                                var points = this.series.points;
                                for (var i = points.length; i >= 0; i--) {
                                    if (i !== this.index) {
                                        this.dataLabel.attr({
                                            fill: ''
                                        });
                                        // points[i].remove(false);
                                    } else {
                                        i = -1;
                                    }
                                }

                                this.series.chart.redraw();
                                this.dataLabel.attr({
                                    fill: '#5daf34'
                                });
                                THIS.GetinfoToCorrespondingTimeline(THIS.rejections_array,data.point.colorIndex,data.point.label);
                            }
                        }
                    },

                    dataLabels: {
                        allowOverlap: true,
                        format: '<span style="color:{point.color}">● </span><span style="font-weight: bold;" > ' +
                            '{point.x:%d %b %Y}</span><br/>{point.label}'
                    },
                    marker: {
                        symbol: 'circle'
                    },
                    data: data,

                }]
            });

And what I want in this is:

When I click on any label it's color changes to green and when I scroll and doing any event that color removed. and what I want it to maintain it's color throughout the movement.
At every event click, I want to redraw the chart keeping the selected event.

Why I want this?

After event click my div width gonna change ex: when I click on any event my width is changed 100 to 70 or 60 % and after that, some part of the chart is hidden because of the sudden change in width. That's why I want to redraw the chart so that it can manage width size again.

Initially, it looks like this:

After clicking on any event:

What I tried:

redraw: function(event) {
                                this.chart.redraw();
                                this.series.redraw();
                            }

And also this code in click function: this.series.redraw();

Fiddle for reference.

ppotaczek ppotaczek · Accepted Answer · 2019-08-02T13:34:34

You can store some flag as a point property and set the color again in redraw event function. I have refactored your code a bit:

chart: {
    type: 'timeline',
    events: {
        redraw: function() {
            var series = this.series[0];

            series.points.forEach(function(p) {
                if (p.customDataLabel && p.dataLabel.fill !== '#5daf34') {

                    p.dataLabel.attr({
                        fill: '#5daf34'
                    });

                }
            });
        }
    }
},

...,

series: [{
    point: {
        events: {
            click: function(data) {
                var points = this.series.points;

                for (var i = points.length; i >= 0; i--) {
                    if (i !== this.index) {
                        if (points[i]) {
                            points[i].dataLabel.attr({
                                fill: '#fff'
                            });

                            points[i].customDataLabel = false;
                        }


                    }
                }

                this.customDataLabel = true;
                this.dataLabel.attr({
                    fill: '#5daf34'
                });

            }
        }
    },

    ...

}]

Live demo: https://jsfiddle.net/BlackLabel/ek23uhop/

Image for reference:

How we can redraw the chart keeping the occurred events on click in Highcharts?

1 Answers