I have a question regarding the tick placement in two similar Highcharts chart. In the first example, I have specified the xAxis
property and in the second example I have specified an x
and y
value in the series. The data is exactly the same, but as you can see the ticks are placed differently. I have tried to play around with the tickmarkPlacement
, minPadding
, maxPadding
to make the first example look like the second, but without success.
Could someone tell me wy the two charts, place ticks so different and how I could make the first example look like the second example?
The code and jsFiddles:
First Example
The code:
$('#container').highcharts(
{
"series": [
{
"name": "Series 1",
"data": [
69.78,
2235.83,
69.78,
908.36,
69.78,
174.78
],
"color": "#0084cb",
"opposite": false
}
],
"xAxis": {
"categories": [
"2015",
"2016",
"2017",
"2018",
"2019",
"2020"
],
"tickmarkPlacement": "on"
}
}
);
The chart:
http://jsfiddle.net/fw9o4fjh/5/
Second Example
The code:
$('#container').highcharts(
{
"series": [
{
"name": "Series 1",
"data": [
{
"y": 69.78,
"x": 2015
},
{
"y": 2235.83,
"x": 2016
},
{
"y": 69.78,
"x": 2017
},
{
"y": 908.36,
"x": 2018
},
{
"y": 69.78,
"x": 2019
},
{
"y": 174.78,
"x": 2020
}
],
"color": "#0084cb",
"opposite": false
}
]
}
);
The chart:
http://jsfiddle.net/y71f7hhd/4/