Remove igDataChart border

This shows how to remove the border from the IgniteUI igDataChart by Infragistics

by gmurray

HTML

<script src="http://cdn-na.infragistics.com/jquery/20131/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20131/latest/js/infragistics.dv.js"></script>
<link rel="stylesheet" href="http://cdn-na.infragistics.com/jquery/20131/latest/css/themes/infragistics/infragistics.theme.css">
<link rel="stylesheet" href="http://cdn-na.infragistics.com/jquery/20131/latest/css/structure/modules/infragistics.ui.shared.css">
<link rel="stylesheet" href="http://cdn-na.infragistics.com/jquery/20131/latest/css/structure/modules/infragistics.ui.chart.css">
<div id="chart"></div>

CSS

.ui-chart-container
{
    border: transparent;
}

JavaScript

$(function () {
    var data = [{
        label: "A",
        value: 4
    }, {
        label: "B",
        value: 3
    }, {
        label: "C",
        value: 2
    }, {
        label: "D",
        value: 1
    }];
    
    var data2 = [{
        label: "A",
        value: 1
    }, {
        label: "B",
        value: 3
    }, {
        label: "C",
        value: 1
    }, {
        label: "D",
        value: 2
    }];

    $("#chart").igDataChart({
        css: {
            chart: "test"  
        },
        width: "500px",
        height: "500px",
        axes: [{
            name: "xAxis",
            type: "categoryX",
            label: "label",
            dataSource: data
        }, {
            name: "yAxis",
            type: "numericY",
            minimumValue: 0
        }],
        series: [{
            name: "column1",
            type: "column",
            xAxis: "xAxis",
            yAxis: "yAxis",
            valueMemberPath: "value",
            dataSource: data
        },{
            name: "column2",
            type: "column",
            xAxis: "xAxis",
            yAxis: "yAxis",
            valueMemberPath: "value",
            dataSource: data2
        }]
    });
})