CODEWITHSUNDEEP
javascripthighcharts
arsalan yarveisi
arsalan yarveisi

Reputation: 23

In highcharts, the state of rangeselector buttons with custom events do not change correctly

I'm using HighStocks and have implemented two buttons in order to have two views of my chart data; "All" and "last 30 days". I have defined the states for the buttons as well, but the button for "last 30 days" do not change its appearance after being clicked, even though the "All" button, does so. And the "selected" property of the chart is also updated and even the state of the button is changes, through some workarounds. Nonetheless, its appearance remains the same.

Hear is my options object:

    balanceChart = Highcharts.stockChart('balance-chart-section', {
        chart: {
            type: 'area',
            style: {
                fontFamily: 'ComicSans',
            }
        },
        legend: {
            enabled: true,
            align: "right",
            verticalAlign: "top",
            rtl: false,
            y: 0,
        },
        rangeSelector: {
            enabled: true,
            allButtonsEnabled: true,
            selected: 1,
            buttons: [{
                type: 'day',
                count: 30,
                text: 'Last 30 days',
                events: {
                    click: function () {
                        this._offsetMax = 0;
                        this._offsetMin = Math.max(chartLength - 30, 0);

                        balanceChart.rangeSelector.selected = 0;
                        balanceChart.rangeSelector.buttons[0].setState(2);
                        balanceChart.rangeSelector.buttons[1].setState(0);

                    }
                },
            }, {
                type: 'all',
                text: 'All',
                events: {
                    click: function () {
                        this._offsetMin = 0;
                        this._offsetMax = Math.max(chartLength - 1, 0);

                        balanceChart.rangeSelector.selected = 1;
                        balanceChart.rangeSelector.buttons[1].setState(2);
                        balanceChart.rangeSelector.buttons[0].setState(0);


                    }
                }
            }],
            verticalAlign: 'bottom',
            buttonPosition: {
                align: 'center',
                y: 12,
            },
            inputEnabled: false,
            buttonSpacing: 30,
            buttonTheme: {
                style: {
                    fill: 'none',
                    color: '#595959',
                },
                stroke: 'none',
                padding: 10,
                fontWeight: 'bold',
                height: 18,
                width: null,
                'stroke-width': 0,
                r: 10,
                states: {
                    hover: {
                        fill: '#0ec3ee',
                        style: {
                            color: 'white'
                        }
                    },
                    select: {
                        fill: '#16aed2',
                        style: {
                            color: 'white'
                        }
                    }
                }
            },
        },
        navigator: {
            enabled: false,
        },
        scrollbar: {
            enabled: false,
        },
        credits: {
            enabled: false,
        },
        title: {
            text: ''
        },
        subtitle: {},
        xAxis: {
            labels: {
                enabled: false
            },
            lineWidth: 0,
            minorGridLineWidth: 0,
            gridLineWidth: 0,
            type: 'datetime',
            lineColor: 'transparent',
            tickLength: 0,
            crosshair: {
                width: 2,
                color: 'gray',
                dashStyle: 'shortDash'
            },
        },
        yAxis: {
            title: {
                enabled: false
            },
            labels: {
                enabled: false
            },
            lineWidth: 0,
            minorGridLineWidth: 0,
            gridLineWidth: 0,
            lineColor: 'transparent',
            minorTickLength: 0,
            tickLength: 0
        },
        tooltip: {
            useHTML: true,
            shared: true,
            formatter: function () {
                var points = this.points;
                var pointsLength = points.length;
                var tooltipMarkup =
                    pointsLength ? '<div class="chart__tooltip" style="margin-bottom: 5px">' + points[0].key + '</div><br/>' : '';
                var index;
                var yValue;

                for (index = 0; index < pointsLength; index += 1) {
                    yValue = (points[index].y);

                    tooltipMarkup += '<div class="chart__tooltip" style="margin-bottom: 5px">' +
                        points[index].series.name + ': <b>' + transform(number_formatter(yValue)) + '<b/>' + ' IRT' + '<br/></div>';
                }

                return tooltipMarkup;
            },
            borderWidth: 1,
            backgroundColor: 'white',
            borderColor: '#B5CAE1',
            borderRadius: 10,
            split: false,
        },
        plotOptions: {
            series: {
                lineWidth: 0
            },
            area: {}
        },
        series: [{
            name: 'OriginalWithSurplus',
            // data: seriesOne,
            data: seriesOneTemp,
            color: '#acdeaa',
        }, {
            name: 'Original',
            // data: seriesTwo,
            data: seriesTwoTemp,
            color: '#bcc0ff',
        }]
    });

Why does one of my buttons not change its appearance when clicked?

Thanks!

Upvotes: 1

Views: 2628

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

If you set correctly count and type buttons properties, you do not need to use the click event with custom code:

    buttons: [{
        type: 'day',
        count: 30,
        text: 'Last 30 days'
    }, {
        type: 'all',
        text: 'All'
    }]

Live demo: http://jsfiddle.net/BlackLabel/3Ld08eot/

API Reference: https://api.highcharts.com/highstock/rangeSelector

Upvotes: 1

Related Questions