yAxis Labels Not Aligned to Grid
by Fusher
HTML
<script src="http://www.highcharts.com/js/highcharts.js"></script>
<div id="container" style="width: 500px; height: 500px"></div>
JavaScript
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
"yAxis": {
"tickInterval": 50,
"opposite": 1,
"gridLineDashStyle": "ShortDot",
"min": "75",
"max": "325",
"title": {
"text": ""
},
"startOnTick": "",
"labels": {
"formatter": function() {
var mylabels = {};
mylabels[200] = '200';
mylabels[250] = '250';
mylabels[100] = '100 or less';
mylabels[300] = '300 or more';
mylabels[150] = '150';
return mylabels[this.value];
},
"style": {
"color": "black",
"fontSize": "7px"
}
}
},
"xAxis": {
"plotLines": [{
"width": 1,
"color": "black",
"value": 33.3333333333333,
"dashStyle": "shortdot"},
{
"width": 1,
"color": "black",
"value": 66.6666666666667,
"dashStyle": "shortdot"}],
"min": 0,
"tickLength": 0,
"max": 100,
"lineWidth": 0,
"endOnTick": "",
"title": {
"text": ""
},
"labels": {
"enabled": ""
}
},
"chart": {
"width": 500,
"plotBorderWidth": 1,
"height": 100,
"renderTo": "container",
"reflow": "",
"render": "SVG",
"animation": 0
},
"plotOptions": {
"series": {
"color": "black",
"dashStyle": "longdash",
"dataLabels": {
"enabled": ""
},
...