CODEWITHSUNDEEP
javascripthighcharts
callumacrae
callumacrae

Reputation: 8433

Highcharts: adding line to graph removes labels from X axis

Here is my chart:

enter image description here

Here's is the chart if I add a line as the first series (note the lack of labels on the x axis):

enter image description here

For some reason, most of the points on the x axis are disappearing.

Here's a reduced case:

$(function () {
    $('#container').highcharts({
        xAxis: {
			type: 'datetime'
		},
        series: [
			{
				type: 'line',
				data: [
					{ x: 1476749571000, y: 36581540.37153554 },
					{ x: 1477429910000, y: 36763124.20193958 }
				]
			},
			{
				type: 'scatter',
				data: [
					{ x: 1476749571000, y: 37170874 },
					{ x: 1476756736000, y: 36541961 },
					{ x: 1476760298000, y: 36412560 },
					{ x: 1476771158000, y: 36766829 },
					{ x: 1476774759000, y: 36819204 },
					{ x: 1476778351000, y: 36193069 },
					{ x: 1476781953000, y: 36289990 },
					{ x: 1476789144000, y: 36751180 },
					{ x: 1476796338000, y: 36058553 },
					{ x: 1476807129000, y: 36803593 },
					{ x: 1476810763000, y: 35963538 },
					{ x: 1476821507000, y: 36896693 },
					{ x: 1476825189000, y: 36187712 },
					{ x: 1476835902000, y: 37084673 },
					{ x: 1476843121000, y: 37136577 },
					{ x: 1476846735000, y: 36607531 },
					{ x: 1476853934000, y: 36334610 },
					{ x: 1476864716000, y: 37140192 },
					{ x: 1476875538000, y: 35929136 },
					{ x: 1476900734000, y: 36137618 },
					{ x: 1476907888000, y: 37195952 },
					{ x: 1476915103000, y: 37170028 },
					{ x: 1476922333000, y: 36438640 },
					{ x: 1476936739000, y: 36425736 },
					{ x: 1476951130000, y: 36954993 },
					{ x: 1476969138000, y: 36288051 },
					{ x: 1476972690000, y: 36666854 },
					{ x: 1476976353000, y: 37066932 },
					{ x: 1476979924000, y: 36628386 },
					{ x: 1476990726000, y: 36997524 },
					{ x: 1477005114000, y: 37036777 },
					{ x: 1477008734000, y: 36069816 },
					{ x: 1477019586000, y: 36788879 },
					{ x: 1477026712000, y: 37195266 },
					{ x: 1477030349000, y: 36568077 },
					{ x: 1477033944000, y: 35936353 },
					{ x: 1477041102000, y: 35840667 },
					{ x: 1477069967000, y: 36826033 },
					{ x: 1477077134000, y: 37165725 },
					{ x: 1477084331000, y: 37078309 },
					{ x: 1477091521000, y: 37195750 },
					{ x: 1477095153000, y: 36788377 },
					{ x: 1477105972000, y: 36951953 },
					{ x: 1477109539000, y: 37072255 },
					{ x: 1477113124000, y: 35688693 },
					{ x: 1477120378000, y: 37021539 },
					{ x: 1477134712000, y: 36883044 },
					{ x: 1477138302000, y: 36838067 },
					{ x: 1477141938000, y: 36719537 },
					{ x: 1477145571000, y: 35900066 },
					{ x: 1477149173000, y: 36141158 },
					{ x: 1477156353000, y: 36647699 },
					{ x: 1477163535000, y: 36516520 },
					{ x: 1477167130000, y: 35817224 },
					{ x: 1477181544000, y: 36758274 },
					{ x: 1477188754000, y: 36717498 },
					{ x: 1477195935000, y: 36913901 },
					{ x: 1477203152000, y: 36518492 },
					{ x: 1477217518000, y: 37143381 },
					{ x: 1477224743000, y: 36334856 },
					{ x: 1477231914000, y: 36910162 },
					{ x: 1477249968000, y: 36977544 },
					{ x: 1477257157000, y: 37174847 },
					{ x: 1477267956000, y: 37051864 },
					{ x: 1477289539000, y: 36343981 },
					{ x: 1477296761000, y: 37020845 },
					{ x: 1477300357000, y: 36180803 },
					{ x: 1477307506000, y: 36145191 },
					{ x: 1477311156000, y: 37102437 },
					{ x: 1477325543000, y: 35496804 },
					{ x: 1477332732000, y: 37193777 },
					{ x: 1477339942000, y: 36683704 },
					{ x: 1477354323000, y: 36577391 },
					{ x: 1477357932000, y: 36231277 },
					{ x: 1477361539000, y: 37198585 },
					{ x: 1477365133000, y: 36789070 },
					{ x: 1477379517000, y: 37138966 },
					{ x: 1477386738000, y: 36953176 },
					{ x: 1477397539000, y: 37135591 },
					{ x: 1477408304000, y: 35867866 },
					{ x: 1477411936000, y: 37141581 },
					{ x: 1477415513000, y: 36864017 },
					{ x: 1477422756000, y: 36743302 },
					{ x: 1477426328000, y: 36948156 },
					{ x: 1477429910000, y: 37199122 }
				]
			}
		]
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Any ideas?

Upvotes: 0

Views: 58

Answers (2)

jlbriggs
jlbriggs

Reputation: 17791

There appears to be a difference in how Highcarts interprets things between the line and scatter series types, though I am unclear how the particular scenario is explained.

But you can work around this by using a line series for both, and simply removing the line from the scatter data.

This way, you can skip setting a tickInterval, and you get the dynamic interpretation by the chart that you want.

Example:

{
  type: 'line',
  lineWidth: 0,
  marker: {
    enabled: true
  },
  findNearestPointBy: 'xy',
  data: [ ... ]
}

Updated fiddle:

Upvotes: 1

morganfree
morganfree

Reputation: 12472

Set axis.tickInterval to force ticks to be drawn.

xAxis: {
  type: 'datetime',
  tickInterval: 1000 * 3600 * 24 // one day interval
},

example: http://jsfiddle.net/g6fjjach/2/

Upvotes: 1

Related Questions