Highcharts on the general column do not distinguish all the series in this column.



  • I've got a schedule, a column of two data sets. After a click on one of the series, I'm trying to identify both as chosen, that's, that's, that all the column is lit as chosen.

    Demo: https://jsfiddle.net/alyonium/hbnokef2/10/

    JS:

    Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
    
    plotOptions: {
        series: {
            stacking: 'percent',
            allowPointSelect: true,
        },
    },
    
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
    }]
    

    });

    What I'm trying to do: https://i.stack.imgur.com/eT7Gj.png

    Found a similar question. https://overcoder.net/q/3719125/%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA-%D0%B2%D1%8B%D0%B1%D0%BE%D1%80%D0%B0-%D0%BD%D0%B5%D1%81%D0%BA%D0%BE%D0%BB%D1%8C%D0%BA%D0%B8%D1%85-%D0%BA%D0%B0%D1%82%D0%B5%D0%B3%D0%BE%D1%80%D0%B8%D0%B9-%D0%B2-highcharts

    But my schedule doesn't change anything after this section's in code.



  • In your code, compared to the two mistakes you're referring to. First, it is said that it is necessary to disable allowPointSelecti.e. fixing the meaning false
    Second, point: {...} should not be. plotOptions At once plotOptions.series♪ So in the end, the final configuration will have a view.

    plotOptions: {
        series: {
            stacking: 'percent',
            allowPointSelect: false,            
            point: {
                events: {
                    click: function() {
                        var clickedPoint = this,
                            chart = clickedPoint.series.chart;                        
    
                    chart.series.forEach(function(s) {
                        s.points.forEach(function(p) {
                           if(p.x == clickedPoint.x) {                          
                               p.select(true, true);
                           }
                       });
                    });
                },
            },
        },
    },         
    

    },



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2