Highcharts AreaRange Chart issues with xAxis and last data point label

Question

I used area range Highcharts but facing certain issues as:

• For X-axis, the chart doesn't start with an initial point rather shows incorrect start tick value(i.e. 2020) instead of 2019.
• Need to show label values for last data point only for each series, attached image below for reference

Could someone please help me with what do I do to resolve my issues.

Thanks in advance!

For the 1st issue, I tried changing the 'pointStart' attribute value for plotOptions->series but didn't work.

"plotOptions": {
        "series": {
            "pointStart": 1546300800000
         }
}

Here is JSFiddle link of the chart containing code:

Answer 1

The first issue can be resolved by setting xAxsi.tickInterval = plotOptions.series.pointInterval:

  xAxis: {
    type: "datetime",
    tickInterval: 31536000000
    ...
  }

---

The second issue can be resolved by providing labels formatter callback function that will return only the last series point value. Also, other dataLabels properties have to be set properly (like align, overflow, etc). Check demo and code posted below.

Code:

dataLabels: {
  enabled: true,
  align: 'left',
  verticalAlign: 'middle',
  padding: 8,
  allowOverlap: true,
  overflow: 'allow',
  crop: false,
  formatter: function() {
    var point = this.point,
      series = this.series;

    if (series.data.length === point.index + 1) {
      return '$' + this.y.toFixed(1);
    } else {
      return '';
    }
  }
}

Demo:

• https://jsfiddle.net/BlackLabel/2xLevj6y/

API reference:

• https://api.highcharts.com/highcharts/xAxis.tickInterval

• https://api.highcharts.com/class-reference/Highcharts.DataLabelsOptionsObject#formatter

• https://api.highcharts.com/class-reference/Highcharts.DataLabelsOptionsObject#align

• https://api.highcharts.com/class-reference/Highcharts.DataLabelsOptionsObject#overflow