Highcharts align plot points to start at y-axis

问题

I have tried everything I can to get the chart to start from the absolute left side of the chart (offsets, minPadding, startOnTick, etc.). No matter what I do I can't get it to start from the very far side. Here is picture examples:

Here is a code example im JsFiddle where you can try it: http://jsfiddle.net/agrublev/VDVpu/3/

and here is some of the code:

chart: {
        type: 'area',
        height: '175'
    },
    legend: false,
    plotOptions: {
        series: {
            events: {
                click: function (e) {
                    location.href = e.point.options.url;
                }
            },
            fillColor: {
                linearGradient: [0, 0, 0, 300],
                stops: [
                    [0, 'rgba(201,241,217,0)'],
                    [1, 'rgba(201, 241, 217,1)']
                ]
            }
        }
    },
    title: {
        text: false
    },
    xAxis: {
        categories: ['04/17', '04/17', '04/17', '04/18', '04/19', '04/19', '04/20', '04/20', '04/21', '04/21'],
        labels: {
            align: "left"
        },tickmarkPlacement: 'on',
        startOnTick: true
    },
    yAxis: {
        title: {
            text: false
        },
        labels: {
            formatter: function () {
                return '$' + (this.value).formatMoney(0);
            },
            y: 15
        },
        alternateGridColor: '#f4f8f9',
        gridLineColor: '#c4dce2' 
    },

Would highly appreciate any help!

回答1:

Don't use categorized xAxis, try to use or linear, or datetime, with labelformatter. Example:

xAxis: {
  labels: {
    formatter: function(){
       return names[this.value];
    }
  }
}

where names is array of categories. See: http://jsfiddle.net/9tpao7Lf/

回答2:

I think instead of category series go for a date time series like here

I've changed your jsfiddle you can check at http://jsfiddle.net/VDVpu/4/

xAxis:{
 type:'datetime',
}

回答3:

If you don't want change the type of xAxis one possible solution is use min & max in xAxis options.

For referance check following jsfiddle code http://jsfiddle.net/zdMTy/58/

    var categories = ['A', 'B', 'C', 'D','E'];
    xAxis: {
          categories: categories,
          min: 0.5,
          max:categories.length - 1.5
    }

来源：https://stackoverflow.com/questions/16450069/highcharts-align-plot-points-to-start-at-y-axis

标签

Highcharts