CODEWITHSUNDEEP
javascripthighcharts
ProfNimrod
ProfNimrod

Reputation: 4310

Why is Y-Axis range so wide in Highcharts Plot?

I am using highcharts to plot some energy data. As far as I can tell I am not using any features in highcharts regarding how to scale and range the y-axis - just relying on default behavior. Here is the plot I get:

enter image description here

Why is there so much "black space" above and below the dataset. The max value is a little over 10kW, and the min value is around 5kW. I would think a better range would be -10 to 15. Here are the options (in CoffeeScript):

options =
    chart:
      alignThresholds: true
      zoomType: "x"
      margin: [
        75
        null
        75
        75
      ]
      backgroundColor: "transparent"
    credits: false
    title:
      text: "Recent Demand and Usage"
    subtitle:
      text: (if document.ontouchstart is undefined then "Click and drag in the plot area to zoom in" else "Drag your finger over the plot to zoom in")
    xAxis: [
      type: "datetime"
      maxZoom: 3600000 # 1 hour
      title:
        text: null
      plotBands: bands
    ,
      type: "linear"
      maxZoom: 3600000 # 1 hour
      title:
        text: null
      labels:
        enabled: false
      lineWidth: 0
      minorGridLineWidth: 0
      lineColor: "transparent"
      minorTickLength: 0
      tickLength: 0
    ]
    yAxis: [
      title:
        text: "Usage, kWh"
    ,
      linkedTo: 0
      title:
        text: "Demand, kW"
      opposite: true
    ]
    tooltip:
      backgroundColor: null
      borderWidth: 0
      shadow: false
      useHTML: true
      hideDelay: 500
      shared: true
      padding: 0
      positioner: (w, h, point) ->
        x: point.plotX - w / 2,
        y: point.plotY - h
      formatter: () ->
        s = "<div class='highcharts-tooltip-container'>"
        s += "<b>" + Highcharts.dateFormat('%a, %b %e, %H:%M', this.x) + "</b>"
        $.each this.points, () ->
          s += "<br/>" + this.series.name + ": " + this.y
        s += "</div>"
        s
    legend:
      verticalAlign: "bottom"
    plotOptions:
      spline:
        lineWidth: 2
        marker:
          enabled: false
        states:
          hover:
            lineWidth: 3
      areaspline:
        lineWidth: 2
        marker:
          enabled: false
        states:
          hover:
            lineWidth: 3
        stacking: "normal"
        fillOpacity: 0.5
      column:
        pointPadding: 0
        groupPadding: 0
        borderWidth: 0
        pointInterval: pointInterval
      series:
        stacking: stacking
    series: seriesCollection

Is there a setting I need to add that would result in a 'tighter' y-axis range, rather than just forcing the min/max by inspecting the raw data.

Upvotes: 0

Views: 1033

Answers (1)

Kamil Kulig
Kamil Kulig

Reputation: 5826

You can try setting yAxis.startOnTick and yAxis.endOnTick to false.

API reference: https://api.highcharts.com/highcharts/yAxis.startOnTick

Upvotes: 1

Related Questions