Chart: Change Bar Margins


#1

I’ve looked through the documentation for the chart component’s BarSeries option on both the API Reference and the tutorial page, but couldn’t find any options to change the margins around the bars/labels such that there is more/less space between them. Does anyone know if this is possible?


#2

Are you looking for labelMargin?

     <chart:RadCartesianChart id="cartesianChart">
		<!-- >> categorical-axis-example -->
		<chart:RadCartesianChart.series>
			<chart:BarSeries items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="Amount">
				<chart:BarSeries.horizontalAxis>
					<chart:CategoricalAxis labelMargin="100" />
				</chart:BarSeries.horizontalAxis>
				<chart:BarSeries.verticalAxis>
					<chart:LinearAxis labelMargin="100" />
				</chart:BarSeries.verticalAxis>
			</chart:BarSeries>
		</chart:RadCartesianChart.series>
		<!-- << categorical-axis-example -->
	</chart:RadCartesianChart>

#3

Thanks for the response! labelMargin allows you to put space between the label and the axis, but I’m looking to reduce space between the bars/labels themselves. In the example you gave, there’s some white space between the blue bars for each country; is there a way to scrunch them together such that there’s no white space?


#4

I’m not sure what you mean, do you want to remove the gap between each bar?


#5

Hey @manojdcoder, sorry for the late response and thanks for your help - yes, that’s exactly what I’m looking for. I saw the code that you did to get it on Android ( chart.getAxisByID(“categoryAxis”).android.setGapLength(0) ) and would like to get a similar solution for iOS as well. Does the same concept work for iOS?


#6

No, not exactly same for iOS. But there must be something similar. You can find it out if you refer the Telerik UI for iOS documentation here.


#7

I really appreciate your help, I’ll take a look!