Как расширить полоски по оси?

Question

У меня есть диаграмма диаграмм Highcharts, где полосы не расширяют всю ширину диаграммы. Как это исправить?

http://jsfiddle.net/brookssh/mtpc5tqa/

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: "chartContainer", 
     defaultSeriesType: 'bar', 
     height: 595 
    }, 
    title: { 
     text: '18 York Road (Consumption/SqFt)', 
     style: { 
      color: '#484a4a', 
      fontSize: '22px', 
      fontFamily: 'Arial, Helvetica, sans-serif', 
      fontWeight: 'bold' 
     } 
    }, 
    subtitle: { 
     text: 'Friday, August 21 2015 through Saturday, August 22 2015' 
    }, 
    credits: { 
     enabled: false 
    }, 
    yAxis: { 
     allowDecimals: false, 
     title: { 
      text: "Test", 
      style: { 
       color: '#0063A2', 
       fontFamily: 'Arial, Helvetica, sans-serif', 
       fontWeight: 'bold' 
      } 
     }, 
     plotLines: [{ 
      color: 'red', // Color value        
      value: null, // Value of where the line will appear 
      width: 2 // Width of the line  
     }], 
     min: 0 
    }, 
    xAxis: [{ 
     categories: ['9th Floor', '8th Floor', '7th Floor', '6th Floor', '5th Floor', '4th Floor', '3rd Floor', '25th Floor', '24th Floor', '23rd Floor', '22nd Floor', '21st Floor', '20th Floor', '19th Floor', '18th Floor', '17th Floor', '16th Floor', '15th Floor', '14th Floor', '13th Floor', '12th Floor', '11th Floor', '10th Floor'], 
     title: { 
     }, 
     type: 'category', 
     plotBands: [{ 
      color: '#DDECFF', 
      from: 1440176400000, 
      to: 1440262800000 
     }], 
     plotLines: [{ 
      color: 'grey', // Color value        
      dashStyle: "dash", 
      value: null, // Value of where the line will appear 
      width: 0 // Width of the line  
     }], 
    }, { 
     labels: { 
      rotation: -45, 
      enabled: false 
     }, 
     lineWidth: 0, 
    }], 
    exporting: { 
     enabled: false 
    }, 
    legend: { 
     enabled: false 
    }, 
    plotOptions: { 
     series: { 
      colorByPoint: true 
     }, 
     spline: { 
      enableMouseTracking: true, 
      animation: { 
       duration: 1500 
      }, 
      marker: { 
       enabled: false, 
       states: { 
        hover: { 
         enabled: true, 
         symbol: 'circle', 
         radius: 5, 
         lineWidth: 1 
        } 
       } 
      } 
     } 
    }, 
    tooltip: { 
     yDecimals: 2, 
     formatter: function() { 
      return tooltipFormat(this.x, null, this.y, yAxisTitle); 
     } 
    }, 
    series: [{ 
     data: [0.01, 0.012, 0.014, 0.013, 0.015, 0.024, 0.019, 0.015, 0.014, 0.013, 0.011, 0.012, 0.015, 0.013, 0.014, 0.01, 0.015, 0.016, 0.021, 0.016, 0.018, 0.021, 0.008], 
     dataLabels: { 
      enabled: true, 
      color: '#000', 
      style: { 
       fontSize: '10px', 
       verticalAlign: 'middle' 
      } 
     } 
    }] 
}); 

Answer 1

Устанавливая allowDecimals: false в оси у, вы заставляете ось продлить до 1. Как самый длинный бар значение только 0,024, это означает, что бары не будет распространяться на всю ширину диаграммы.

Снятие линии allowDecimals: false позволяет оси автоматически установить на 0,03, а полосы - на большую часть ширины диаграммы.

Fiddle

Как говорит Себастьян Bochan, если вы хотите, дополнительный контроль над позиционированием клещей можно использовать tickPositions или tickPositioner. Это позволит вам, если потребуется, увеличить длинный бар до полной ширины диаграммы.