Highcharts limit the amount of items that will be displayed in categories on the Y axis

Navigation
2

I have the following chart in Highcharts, I wanted to limit the amount of items that will be displayed on the Y axis, for example in 7 items, which will always show the first and last items of the categorias variable.

JSFiddle 

$(function () {

var categorias = ["Pos 01", "Pos 02", "Pos 03", "Pos 04", "Pos 05", "Pos 06", "Pos 07", "Pos 08", "Pos 09", "Pos 10", "Pos 11", "Pos 12", "Pos 13", "Pos 14", "Pos 15", "Pos 16", "Pos 17"];

var planejado = [{x: 1534095420000, y:15},{x:1534097580000, y:14},{x:1534099020000,y:13},{x:1534119900000,y:12},{x:1534149780000,y:11},{x:1534174620000,y:10},{x:1534176420000,y:9},{x:1534189020000,y:8},{x:1534313940000,y:7},{x:1534317900000,y:6},{x:1534337700000,y:5},{x:1534373880000,y:4},{x:1534374120000,y:3},{x:1534375560000,y:2},
{x:1534377720000,y:1},{x:1534378200000,y:0},{x:1534378200000,y:0},{x:1534414200000,y:0},{x:1534414620000,y:1}];

var series =[{
                name: "Planejado",
                id: "planejado",
                data: planejado
            }];
            
          
  // Create the chart
  window.chart = new Highcharts.Chart('container',{
                colors: ["#7cb5ec"],
                chart: {
                    type: "spline",
                },
                exporting: {
                    enabled: false
                },
                title: {
                    text: 'Gráfico'
                },
                yAxis: {
                    categories: categorias,
                    title: {
                        text: 'Posição'
                    },
                    labels: {
                        format: '{value}'
                    },
                },
                xAxis: {
                    title: {
                        text: 'Tempo'
                    },
                    type: 'datetime',
                    tickInterval: 3600000,
                },
                plotOptions: {
                    spline: {
                        findNearestPointBy: 'xy',
                        marker: {
                            enabled: true
                        }
                    }
                },
                tooltip: {
                    split: false,
                    useHTML: true,
                    style: {
                        pointerEvents: 'all'
                    },
                    formatter: function () {
                        return this.series.yAxis.categories[this.point.y];
                    }
                },
                "series": series
            });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script><divid="container" style="height: 400px; min-width: 500px"></div>
    
asked by anonymous 20.09.2018 / 18:56

1 answer

0

Highcharts has the minimum and maximum axis value properties, see documentation

yAxis: {min: 0, max: 100}

  

... always showing the first and last items of the variable    categorias .

For the above question I chose to create another array containing the rule mentioned. 

$(function() {

  var categorias = ["Pos 01", "Pos 02", "Pos 03", "Pos 04", "Pos 05", "Pos 06", "Pos 07", "Pos 08", "Pos 09", "Pos 10", "Pos 11", "Pos 12", "Pos 13", "Pos 14", "Pos 15", "Pos 16", "Pos 17"];
  var categories = categorias.slice(0, 6);
  categories.push(categorias.slice(-1)[0])

  var planejado = [{
      x: 1534095420000,
      y: 15
    }, {
      x: 1534097580000,
      y: 14
    }, {
      x: 1534099020000,
      y: 13
    }, {
      x: 1534119900000,
      y: 12
    }, {
      x: 1534149780000,
      y: 11
    }, {
      x: 1534174620000,
      y: 10
    }, {
      x: 1534176420000,
      y: 9
    }, {
      x: 1534189020000,
      y: 8
    }, {
      x: 1534313940000,
      y: 7
    }, {
      x: 1534317900000,
      y: 6
    }, {
      x: 1534337700000,
      y: 5
    }, {
      x: 1534373880000,
      y: 4
    }, {
      x: 1534374120000,
      y: 3
    }, {
      x: 1534375560000,
      y: 2
    },
    {
      x: 1534377720000,
      y: 1
    }, {
      x: 1534378200000,
      y: 0
    }, {
      x: 1534378200000,
      y: 0
    }, {
      x: 1534414200000,
      y: 0
    }, {
      x: 1534414620000,
      y: 1
    }
  ];

  var series = [{
    name: "Planejado",
    id: "planejado",
    data: planejado
  }];


  // Create the chart
  window.chart = new Highcharts.Chart('container', {
    colors: ["#7cb5ec"],
    chart: {
      type: "spline",
    },
    exporting: {
      enabled: false
    },
    title: {
      text: 'Gráfico'
    },
    yAxis: {
      categories: categories,
      title: {
        text: 'Posição'
      },
      labels: {
        format: '{value}'
      },
      max: 6,
      min: 0
    },
    xAxis: {
      title: {
        text: 'Tempo'
      },
      type: 'datetime',
      tickInterval: 3600000,
    },
    plotOptions: {
      spline: {
        findNearestPointBy: 'xy',
        marker: {
          enabled: true
        }
      }
    },
    tooltip: {
      split: false,
      useHTML: true,
      style: {
        pointerEvents: 'all'
      },
      formatter: function() {
        return this.series.yAxis.categories[this.point.y];
      }
    },
    "series": series
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script><divid="container" style="height: 400px; min-width: 500px"></div>
    
25.09.2018 / 22:54
FlowType is not updating when maximizing / restoring window View Log with TYPE command