[Solved] Bar Chart Series Label and Plot Area Padding Questions

[Randy]

I have attached an image of a bar chart I am currently generated (with my code at the bottom of this post).

Two Questions:

(1) Can I have just one of the chart series labels show up?
In my uploaded picture example, could the OCT "$222.14" show up while the rest are hidden from view?
They may have meant for the first month's amount to display (the MAR "$523.12), so hopefully the solution is flexible enough.

(2) There seems to be some kind of padding on the right of the chart that is inconsistent with the padding on the left of the chart.
See uploaded image.
Is there any remedy for this?

Thanks,

Randy

Here is my existing code that you can use

HTML

<div id="chartStatementHistory" style="width: 450px; height:150px;" data-win-control="Telerik.UI.RadChart"></div>

.JS

// Build The RadChart
var chartData = new WinJS.Binding.List([
    {
        date: new Date(2013, 2, 1),
        amount: 523.12
    },
    {
        date: new Date(2013, 1, 1),
        amount: 448.94
    },
    {
        date: new Date(2012, 12, 1),
        amount: 259.49
    },
    {
        date: new Date(2012, 11, 1),
        amount: 455.89
    },
    {
        date: new Date(2012, 10, 1),
        amount: 118.21
    },
    {
        date: new Date(2012, 9, 1),
        amount: 222.14
    }
]);

//order by date descending
chartData.sort(function (a, b)
{
    return b.date - a.date;
});

// Represent dates as strings (month names only)
chartData.forEach(function (item)
{
    item.date = item.date.toString().split(" ")[1]
});

var chart = new Telerik.UI.RadChart(document.getElementById("chartStatementHistory"), {
    dataSource: chartData,
    series: [
        {
            type: "column",
            field: "amount",
            color: "#9C3987",
            labels: {
                visible: true,
                format: "${0}",
                font: "11pt customsans normal",
                color: "#000000",
                weight: "normal"
            }
        }
    ],
    categoryAxis: {
        field: "date",
        color: "#000000",
        labels: {
            font: "11pt customsans normal",
            color: "#000000"
        },
        majorTicks: {
            size: 0,
            visable: false
        },
        minorTicks: {
            size: 0,
            visable: false
        }
    },
    valueAxis: {
        field: "amount",
        color: "#9C3987",
        labels: {
            font: "11pt customsans normal",
            color: "#000000",
            format: "${0}"
        },
        majorGridLines: {
            color: "#FFFFFF",
            width: 0,
            visable: false
        },
        minorGridLines: {
            color: "#FFFFFF",
            width: 0,
            visable: false
        },
        visible: false
    },
    tooltip: {
        visible: false,
        labels: {
            font: "11pt customsans normal",
            format: "${0}"
        }
    },
    plotArea: {
        border: {
            width: 1,
            color: "#000000"
        }
    },
    theme: "light",
    background: "#FFFFFF"
});

[Tsvetina]

Hi Randy,

To your first question - you can use a template for the labels and show them conditionally. For categorical series the template has a binding context containing two values: category (the category name) and value (the value of the current data point). So, inside the template you can check whether the category is among the ones that should be visible, and if so, format the value and output it. In your scenario, the following code will do the trick:

series: [
    {
        type: "column",
        field: "amount",
        color: "#9C3987",
        labels: {
            visible: true,
            font: "11pt customsans normal",
            color: "#000000",
            weight: "normal",
            template: "#=['Oct', 'Mar'].indexOf(category) != -1 ? '$'+ value:''#"
        }
    }
]

As a statement this means "if the current category name is among 'Oct', 'Mar' (could contain more values), output the current value with a $ in front, otherwise output an empty string".

More information on templates inside RadControls for Windows 8 HTML is available here:
Templates support in RadControls.

With regard to your second enquiry, the additional space is shown because the chart legend isn't hidden by default. Add the following to your chart definition and the spacing will be equal on both sides of the chart:

legend: {
    visible: false
}

The resulting chart looks as shown in the attachment.

Regards,
Tsvetina
the Telerik team

[Randy]

Ah, the legend had the padding, thanks Tsvetina!
I will try the template too.

Thanks!
Randy