CODEWITHSUNDEEP
javascripthighcharts
Ujjawal Bhandari
Ujjawal Bhandari

Reputation: 1372

Last label on xaxis disappears when resize

I am trying to force highcharts to show last label on x-axis when "step" is enabled. Code below works but it hides last label when I change device width (let's say open chrome console). Problem arises on mobile devices when I scroll down after the chart, last label disappears.

   chart:
   {
        renderTo: "container",
        type: "line",
        events:{
             load:function(){
                 var ticks = $.map(this.axes[0].ticks, function(t){return t;});
                   ticks[ticks.length-2].render(0);
            }
         }
    }

Upvotes: 2

Views: 147

Answers (1)

Jibin.Jay
Jibin.Jay

Reputation: 342

First of all the last label 2020 is appearing because of your logic in load event. Ideally that label shouldn't be appearing because your step value is 3. Anyways, you need to add the same logic of load in redraw event to get the last label on resize.

const df = [
  { Period: 2009, value: 1056043 },
  { Period: 2010, value: 1278495 },
  { Period: 2011, value: 1482508 },
  { Period: 2012, value: 1545703 },
  { Period: 2013, value: 1579593 },
  { Period: 2014, value: 1620531.9 },
  { Period: 2015, value: 1502572.2 },
  { Period: 2016, value: 1451010.7 },
  { Period: 2017, value: 1546273 },
  { Period: 2018, value: 1663982.3 },
  { Period: 2019, value: 1643160.9 },
  { Period: 2020, value: 1431638.4 }
];

var chart = new Highcharts.Chart({
  chart: {
    renderTo: "container",
    height: 300,
    type: "areaspline",
    events: {
      load: function () {
        var ticks = $.map(this.axes[0].ticks, function (t) {
          return t;
        });
        ticks[ticks.length - 2].render(0);
      },
      redraw: function () {
        var ticks = $.map(this.axes[0].ticks, function (t) {
          return t;
        });
        ticks[ticks.length - 2].render(0);
      }
    }
  },
  title: {
    text: "Emissions of CO2 - from Fossil Fuels - Total (CDIAC)"
  },
  xAxis: {
    categories: df.map((o) => o.Period),
    labels: {
      step: 3,
      style: {
        fontFamily: "Arial, Helvetica, sans-serif;",
        fontSize: "0.8rem",
        fontWeight: "600",
        background: "#000000",
        whiteSpace: "nowrap",
        textOverflow: "none"
      }
    },
    showLastLabel: true,
    endOnTick: true,
    overflow: "allow"
  },
  yAxis: {
    min: 0
  },
  series: [
    {
      data: df.map((o) => o.value),
      name: "Germany"
    }
  ]
});

Upvotes: 1

Related Questions