[Solved] Chart Labels Go Off Edge

[Stephen]

Hi,

I'm using the RadChart to make a bar chart in an HTML Windows 8 app, but having some problems with labels. The chart doesn't make room for them, so larger values go off the edge of the container. I'm attaching an image of what I'm seeing.

My HTML looks like this:

<div class="m-homepage-sales-yesterday">
    <p class="m-datapair">
        Yesterday's Sales<span class="m-datapair-value">$10,750</span>
    </p>
    <div id="homepage-sales-yesterday-chart"></div>
</div>

My Javascript looks like this:

new Telerik.UI.RadChart(document.getElementById('homepage-sales-yesterday-chart'), {
    categoryAxis: {
        categories: ['Cat1', 'Cat2', 'Cat3'],
        line: { visible: false },
        majorTicks: { visible: false }
    },
    height: 90,
    legend: { visible: false },
    series: [{
        border: { width: 0 },
        data: [8625, 1151, 974],
        gap: 0.2,
        labels: { format: 'c0', visible: true },
        type: 'bar'
    }],
    theme: 'light',
    valueAxis: {
        majorGridLines: { visible: false },
        visible: false
    }
});

Please help. Thanks!

[Tsvetina]

Hello Stephen,

You can easily fix this by defining a right margin to the chart plot area. With your definition, 30 pixels seem to be enough:

var chart = new Telerik.UI.RadChart(document.getElementById('homepage-sales-yesterday-chart'), {
    categoryAxis: {
        categories: ['Cat1', 'Cat2', 'Cat3'],
        line: { visible: false },
        majorTicks: { visible: false }
    },
    height: 90,
    legend: { visible: false },
    series: [{
        border: { width: 0 },
        data: [8625, 1151, 974],
        gap: 0.2,
        labels: { format: 'c0', visible: true },
        type: 'bar'
    }],
    theme: 'light',
    valueAxis: {
        majorGridLines: { visible: false },
        visible: false
    },
    plotArea: {
        margin: {
            right: 30
        }
    }
});

Regards,
Tsvetina
Telerik