[Solved] How to Remove or Hide Category Plot Area Line

[Randy]

Hi,

I have this chart just about the way I need it, except I need to remove, (hide, make transparent, etc) the black line at the bottom of the chart.
(See attached jpg & code)

Thanks,

Randy

<div id="chartHubSpendCashFlow" style="height:100%" data-win-control="Telerik.UI.RadChart"></div>

var hubSpendDepositData = [{ date: "Cash Flow August 2012", amount: 3567.89 }];
var hubSpendWithdrawalData = [{ date: "Cash Flow August 2012", amount: 2122.63 }];

var hubSpendDepositDataSeries1 = hubSpendDepositData.map(function (item)
{
    return item.amount;
});

var hubSpendWithdrawalDataSeries2 = hubSpendWithdrawalData.map(function (item)
{
    return item.amount;
});
var hubSpendCashFlowCategoriesData = hubSpendDepositData.map(function (item)
{
    return item.date;
});

// Build the RadChart
var chart = new Telerik.UI.RadChart(document.getElementById("chartHubSpendCashFlow"), {
    seriesDefaults: { type: "column" },
    series: [
        {
            data: hubSpendDepositDataSeries1, name: "Deposits", color: "#9EC457",
            labels:
            {
                font: "11pt sans normal",
                color: "#000000",
                format: "+ ${0:N2}",
                visible: true
            }
        },
        {
            data: hubSpendWithdrawalDataSeries2, name: "Withdrawals", color: "#F8A72C",
            labels:
            {
                font: "11pt sans normal",
                color: "#000000",
                format: "- ${0:N2}",
                visible: true
            }
        }
    ],
    valueAxis: [{
        name: 'deposits',
        labels: {
            font: "11pt sans normal",
            color: "#000000",
            format: "${0:N2}",
            visible: false
        },
        majorGridLines: {
            color: "#FFFFFF",
            width: 0,
            visable: false
        },
        minorGridLines: {
            color: "#FFFFFF",
            width: 0,
            visable: false
        },
        visible: false
    }],
    categoryAxis: {
        categories: hubSpendCashFlowCategoriesData,
        color: "#000000",
        labels: {
            font: "14pt sans normal",
            color: "#000000",
            visible: false
        },
        majorTicks: {
            size: 0,
            visable: false
        },
        minorTicks: {
            size: 0,
            visable: false
        }
    },
    tooltip: {
        visible: false,
        labels: {
            font: "11pt sans normal",
            format: "${0}"
        }
    },
    plotArea: {
        border: {
            width: 0,
            color: "#000000"
        }
    },
    legend: {
        position: 'bottom',
        visible: false
    },
    theme: "light",
    background: "transparent"
});

[Tsvetina]

Hello Randy,

You can make the category axis line invisible, like this:

categoryAxis: {
   line: {
       visible: false
   },
   ...
}

Another option, if you do not want to show labels as well, is to hide the entire axis, as you have done with the valueAxis.

Greetings,

Tsvetina
the Telerik team

[Randy]

Excellent Tsvetina, thanks!

I hope as time goes on, the .CHM help file I use will become more robust and contain all these little nuggets!

Randy