This question is locked. New answers and comments are not allowed.
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:
My Javascript looks like this:
Please help. Thanks!
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!
1 Answer, 1 is accepted
0
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:
Regards,
Tsvetina
Telerik
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
Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.