Would like to be able to control the width or thickness of the column or bar for the given chart type. Based on testing the only way to control is to set the width/height based on the number of series
For example take the example located http://www.igniteui.com/data-chart/bar-and-column-series
open in JS Fiddle and remove all but one series on the bar chart, the bar fills the space allocated to chart by making the series wider, we would like to be able to control the thickness of the bar no matter how many series are set. Attempted to use the thickness attribute of series but does not seem to have an impact
Here is the results js:
$("#barChart").igDataChart({ width: "98%", height: "550px", dataSource: lastFiveYears, title: "Energy Production Per Country", subtitle: "The top five Total Primary Energy producers", legend: { element: "barLegend" }, axes: [{ name: "xAxis", type: "numericX", title: "Quadrillion Btu" }, { name: "yAxis", type: "categoryY", label: "Year" }], series: [{ name: "series1", title: "Canada", type: "bar", isHighlightingEnabled: true, isTransitionInEnabled: true, xAxis: "xAxis", yAxis: "yAxis", valueMemberPath: "Canada" }] });
Thanks,
Steve
Hi Steve,
According to the barChart configuration from above, combining the height property of the chart and the gap property seem enough to achieve whatever width of the bars.
As you have found out using the gap property will enable you to adjust the width of the columns, while using the thickness property affects only the column wrap line thickness. Additionally, the resolution and overlap properties can be used to achieve more flexibility over the columns width and spacing between.
If you want me to suggest a given combination between the properties, please provide me a sample with your chart and let me know how the visualization is needed to change.
Adding gap to 1 to the category axis did improved the visualization that we are trying to accomplish, although having full control over the thickness of the column or bar would be the optimal functionality.