CODEWITHSUNDEEP
highchartslabelaxis
luftikus143
luftikus143

Reputation: 1285

Chrome won't display the x-axis labels in Highcharts, Safari and Firefox do it

Strangely, Chrome does not display the abbreviations for the months in the x-axis, but only a number (8307). Firefox and Safari do display it correctly.

Here is the code: https://jsfiddle.net/luftikus143/cpnzhveu/10/

$(function() {
$('#container').highcharts({

title: {
  text: "Arctic Sea Ice Extent",
  align: "center"
},

data: {
  csv: document.getElementById('csv').innerHTML
},

xAxis: {
  labels: {
    step: 31,
    staggerLines: 1,
    formatter: function() {
      return this.value.toString().substring(2, 6).toUpperCase();
    },
    style: {
      color: "#666666"
    },
    x: 30
  },
  tickWidth: 0
},

plotOptions: {
  series: {
    connectNulls: true,
    shadow: false,
    lineWidth: 1,
    color: 'rgba(100, 100, 100, 0.2)',
    marker: {
      enabled: false
    }
  }
},
legend: {
  enabled: false
},
});
});

Any idea why that would be so and how to change it? Thanks for any hints!

Upvotes: 1

Views: 200

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

For some reason it seems they interpret the first column of your CSV differently. Chrome seems to transform it into a timestamp, while Firefox treats it as a pure string.

Specifying that the x-axis is a category-axis seems to make it clear for Chrome as well:

xAxis: 
{
    type: 'category'
}

See this updated JSFiddle for a demonstration.

Upvotes: 1

Related Questions