Question 303944 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – HighCharts JS Column Graph yAxis Going Above Ceiling Value

Working on building a highcharts element that displays last 20 games "Headshot%" in a Column Bar Graph.

The issue i’m running into, is despite setting my yAxis value range floor: 0, ceiling: 100, my graphs top tick is 120%.

If I lower my ceiling amount to 90> then it will accurately set the ceiling to the correct value.

NOTE: I have tested to see if my series values going over 100 in an attempt to create zones was causing the issue, although it appears to have no effect.

JSFIDDLE LINK: https://jsfiddle.net/Lukeolafp/vt49zhdx/

Code (Incase JSFiddle Fork Stops working)

JS:

document.addEventListener('DOMContentLoaded', function () {
  const chart = Highcharts.chart('container', {
      chart: {
          type: 'column',
          backgroundColor: '#2A2A2A',
      },

      title: false,

      subtitle: false,

      xAxis: {
          categories: ['Game 1', 'Game 2', 'Game 3','Game 4', 'Game 5', 'Game 6','Game 7', 'Game 8', 'Game 9','Game 10',
                      'Game 11', 'Game 12', 'Game 13','Game 14', 'Game 15', 'Game 16','Game 17', 'Game 18', 'Game 19','Game 20'
                    ],
          labels: {
            enabled: false
          }
          
      },
      yAxis: {
        floor: 0,
        ceiling: 100,
        tickAmount: 4,
        title: {
          text: null
        },
        labels: {
          formatter: function() {
          return this.value + ' %';
          },
          style: {
          fontSize: 10,
          color: '#FFF',
          fontFamily: 'Helvetica Neue',
          fontWeight: 'regular'
          },
        },
      },

      credits: {
        enabled: false
      },
      
      plotOptions: {
        series: {
            pointWidth: 9,
            borderRadius: 3,
            borderWidth: 0
        }
      },

      series: [{
          name: 'Headshot %',
          showInLegend: false,
          data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 99, 100, 34, 13, 35, 15, 12, 19, 11, 13, 22],
          zones: [{
            value: 15,
            color: '#ffffff'
          },{
            value: 30,
            color: '#A2F8B5',
          },{
            value: 45,
            color: '#42DC64',
          }, {
            value: 90,
            color: '#00B828',
          },{
            value: 100,
            color: {
              linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
              stops: [
                  [0, '#C9A44B'], // start
                  [0.5, '#F7E991'], // middle
                  [1, '#C9A44B'] // end
              ]
            }
          },{
            value: 101,
            color: '#FF78F2'
          }]
      }]
  });
});

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial scale=1">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>HTML CSS JS ISOLATE TEST ENVIROMENT</title>
        <link rel="stylesheet" href="Styles.css">
    </head>

    <body>

        <div class="sidePanelHeadshotHighChart" id="container"></div>

        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="heatmap.js-master/build/heatmap.min.js"></script>
        <script src="script.js"></script>
    </body>
    

</html>

CSS:

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #505050;
}

.sidePanelHeadshotHighChart {
  height: 64px;
  width: 283px;
  /* height: 400px;
  width: 100%; */
  margin-top: 100px;
}
Tags:

2

Answers


  1. 0

    The High Charts js docs show min and max instead of floor and ceiling.

    screenshot

    Login or Signup to reply.
  2. 0

    That’s because you’ve set tickAmount: 4 property and the interval for ticks can not be evenly calculated. Use tickPositions instead:

    yAxis: {
  tickPositions: [0, 33.33, 66.66, 100],
  ...
}

    Live demo: https://jsfiddle.net/BlackLabel/ykbhwrfs/

    API Reference:

    https://api.highcharts.com/highcharts/yAxis.tickAmount

    https://api.highcharts.com/highcharts/yAxis.tickPositions

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search