Hide categories with value below than specific value Highcharts

问题

I have a stacked bar chart, I want to hide bar column if value less than specific value. I use yAxis update min value, and bar column did not display.

var dataMax = chart.yAxis[0].dataMax;
chart.yAxis[0].update({
                min: dataMax * 0.3
              });

But I also want to hide categories in xAxis where bar column is hidden.

I want to hide them if no bar column

This is my source code

var chart = Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked column chart'
    },
    xAxis: {
        categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Total fruit consumption'
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
				textOutline: false,
                color: ( // theme
                    Highcharts.defaultOptions.title.style &&
                    Highcharts.defaultOptions.title.style.color
                ) || 'gray'
            }
        }
    },
    legend: {
        align: 'center',
        x: 0,
        verticalAlign: 'bottom',
        y: 5,
        
        backgroundColor:
            Highcharts.defaultOptions.legend.backgroundColor || 'white',
        borderColor: '#CCC',
        borderWidth: 0,
        shadow: false
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true
            },
             pointPadding: 0.05,
        maxpointWidth: 35,
        //groupPadding:0.1,
        borderWidth: 0
        },
         series: {
          maxpointWidth: 35,
        groupPadding: 0.36,
      //stacking: 'normal',
      dataLabels: {
        formatter: function() {
          if(this.y === this.point.stackTotal || this.y == 0) {
            return ''
          }
          return this.series.name;
        },
        enabled: true,
        //allowOverlap: true,
        //align: 'right',
        color: '#444',
		textOutline: false,
        shadow: false,
        //x:-50,
        style: {
          fontSize: "8px",
          textShadow: "0px"
        }
      },
      //pointPadding: 0.1,
      pointWidth: 50,
      groupPadding: 0.2,
      stacking: 'normal',
      //colorByPoint: true,
      //showInLegend: false
    }
    },
    series: [{"name":"(Component)","data":[2039521123,0,0,4046613348,0,544280301,3865715691,0],"display":2,"stack":"Forecast","showInLegend":false,"pointPadding":0,"pointPlacement":0},{"name":"(Substrate)","data":[1848232605,1109333700,0,0,1478070275,0,0,0],"display":2,"stack":"Forecast","showInLegend":false,"pointPadding":0,"pointPlacement":0},{"name":"(Module)","data":[0,532822345,452625462,0,0,207607714,0,103089669],"display":2,"stack":"Forecast","showInLegend":false,"pointPadding":0,"pointPlacement":0},{"name":"(Support)","data":[0,0,0,0,0,537829903,0,0],"display":1,"stack":"Forecast","showInLegend":false,"pointPadding":0,"pointPlacement":0},{"name":"(Component)","data":[11118985500,0,4732915644,14216361483,0,3423432732,3216931478,0],"display":1,"stack":"Real","showInLegend":false},{"name":"(Substrate)","data":[8495153800,3191092821,0,0,13153490000,0,0,0],"display":3,"stack":"Real","showInLegend":false},{"name":"(Module)","data":[0,13925175787,9837488553,0,0,3705001758,0,338212038],"display":1,"stack":"Real","showInLegend":false},{"name":"(Support)","data":[0,0,0,0,0,4845038686,0,0],"display":1,"stack":"Real","showInLegend":false},{"name":"Forecast","color":"#fe7c7c","events":{}},{"name":"Real","color":"#43d487","events":{}}]
});


var dataMax = chart.yAxis[0].dataMax;
chart.yAxis[0].update({                min: dataMax * 0.3              });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

JS Fiddle https://jsfiddle.net/viethien/n5auqt3v/15/

回答1:

Basic on your yAxis.max settings we can check which points with stackTotal higher than setting are visible and what categories they have assigned.

let ar = []
chart.series.forEach(s => {
    s.points.forEach(p => {
    if (p.stackTotal > chart.yAxis[0].dataMax * 0.3){
        ar.push(p.category)
    }
  })
})

When we have an array of visible categories as a next step we need to get the unique values from it.

let xAxisCat = [... new Set(ar)];

As a final step, we can set the new xAxis.max as a length of this array and categories to this array.

Demo: https://jsfiddle.net/BlackLabel/y92usjvf/

This is a solution without changing the data for your particular case.

回答2:

Make your xAxis.categories dynamic and dependent on your data collection's length

Pseudo:

Get maximum length of columns in every row of your data.
Set that length to your xAxis.categories so that it'll only match the data you provided.

来源：https://stackoverflow.com/questions/61317228/hide-categories-with-value-below-than-specific-value-highcharts

标签

javascript

jquery

html

Highcharts