CODEWITHSUNDEEP
highcharts
Daniel Gwerzman
Daniel Gwerzman

Reputation: 121

How to remove the grid line overlappings in highcharts?

Is there a way to remove the pixels at the edge of yAxis gridLine in left of the left xAxis gridLine?

grid lines overlapping

See example: http://jsfiddle.net/48LvK/

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'area',
                marginRight: 130,
                marginBottom: 25
            },
            "xAxis": {
                "tickWidth": 0,
                "gridLineWidth": 1,
                "gridLineDashStyle": "ShortDot",
                "gridLineColor": "#c1c2c3",
                "labels": {
                    "enabled": false
                },
            },
            "yAxis": {

            },
            "plotOptions": {
                "area": {
                    "fillColor": "transparent",
                    "marker": {
                        "enabled": false
                    }
                }
            }, 
            series: [{
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }]
        });
    });
});

Upvotes: 2

Views: 2935

Answers (1)

Barbara Laird
Barbara Laird

Reputation: 12717

You'll want to add startOnTick: true to your xAxis http://jsfiddle.net/sppRL/

    "xAxis": {
        "tickWidth": 0,
        "gridLineWidth": 1,
        "gridLineDashStyle": "ShortDot",
        "gridLineColor": "#c1c2c3",
        "labels": {
            "enabled": false
        },
        "startOnTick": true
    },

What you're seeing aren't actually tick marks, they are the extension of the y-axis to the left of the first xAxis tick.

http://api.highcharts.com/highcharts#xAxis

Upvotes: 6

Related Questions