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

Asked

Viewed 145 times

2

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

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>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 500px"></div>

javascript highcharts

1 answer

0

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

yAxis: {min: 0, max: 100}

...and will always display the first and last variable item categorias.

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

$(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>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 500px"></div>

  • This way does not suit me, if you check in my example the points still appear, even if they are not on the y axis.

Browser other questions tagged javascript highcharts

You are not signed in. Login or sign up in order to post.