highcharts with angular, removing xAxis line

Question

I am using highcharts and I have made a directive called sparkLine here is its code:

chartModule.directive('sparkLine', function () {
return {
    restrict: 'E',
    scope: {
        series: '=',
        lineName: '=',
        lineTooltip: '=',
        xAxisEnabled: '=',
        yAxisEnabled: '=',
        lineColor: '='
    },
    replace: true,
    template: '<div></div>',

    link: function (scope, element, attrs) {

        var xEnable = (typeof (attrs.xAxisEnabled) == 'undefined') ? false : true;
        var yEnable = (typeof (attrs.yAxisEnabled) == 'undefined') ? false : true;
        var lColor = (typeof (attrs.lineColor) == 'undefined') ? '#808080' : lineColor;

        $(element).highcharts({
            chart:
            {
                type: 'line',
                width: attrs.width,
                height: attrs.height,
                backgroundColor: attrs.backgroundColor
            },
            title: {
                text: ''
            },
            plotOptions: {
                series: {
                    marker: {
                        radius: (typeof (attrs.pointRadius) == 'undefined') ? 2 : attrs.pointRadius,
                    }
                }
            },
            navigation: {
                buttonOptions: {
                    enabled: false
                }
            },
            credits: {
                enabled: false
            },

            xAxis: {
                lineColor: 'transparent',
                tickWidth: 0,
                lineHeight: 0,
                labels: {
                    enabled: xEnable
                },
                categories: []
            },
            yAxis: {
                lineColor: 'transparent',
                gridLineColor: 'trasparent',
                title: {
                    text: ''
                },
                labels: {
                    enabled: yEnable
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: lColor
                }]
            },
            tooltip: {
                formatter:
                    function () {
                        return scope.lineTooltip(this.x, scope.lineName, this.y.toLocaleString());
                    },
                hideDelay: 50
            },
            legend: {
                enabled: false
            },
            series: [{
                name: '',
                data: []
            }]
        });

        scope.$watch('series', function () {
            var chart = $(element).highcharts();
            scope.newperiodsTrends = [];
            scope.categoriesPeriods = [];
            angular.forEach(scope.series, function (elm, index) {
                scope.newperiodsTrends.push(elm.Value);
                scope.categoriesPeriods.push(elm.IterationName);
            });

            chart.series[0].setData(scope.newperiodsTrends);
            chart.xAxis[0].setCategories(scope.categoriesPeriods);
        });
    }
}

});

the usage for this directive in my code is:

 <spark-line series="dataSeries" line-tooltip="tooltip" line-name="'Value'" class="sparkLine">

in my html code I am using angularjs and I have created a table using ng-repeat:

my problem is that i cannot remove the xAxis from one of the graphs.

EDIT: I found the problem: when i removed the height and width that are included inside a css file (class = "sparkLine") the line was removed maybe its a highchart glitch... if there is a solution for it I would very much like to hear about it thanks

Answer 1

As for Highcharts you can remove axis using Axis.remove - API.

If you want to hide it from view you are doing it correctly if

xAxis: {
   ...  
   lineWidth: 0,
   minorGridLineWidth: 0,
   lineColor: 'transparent',
   ...          
   labels: {
       enabled: false
   },
   minorTickLength: 0,
   tickLength: 0
}

source

Live example, like jsFiddle would be very helpful to determinate origin of the unwanted grey line.