Different columns width in column chart

[Lucas Barros Scianni Morais]

Hello team!

Is there a way to control the height, the width and the color of each column in a column chart?

My data is like 

{name: project 1, x:10, y:100, color: red}

I want Y to be the y value (height) and I want x to be the column width (not the axis value).

Also, i want no space between the columns.

Thanks in advanced!

[Swetha Babu]

Lucas,

Greetings from Syncfusion.

Please find the below response for your queries.

Query1: I want no space between the columns.

We can render the column without the space between the column by setting the columnSpacing as 0 and columnWidth property as 1 in the series of the chart. We have created a react application to demonstrate the same. Please find the below stackblitz link for your reference.

Sample link: https://stackblitz.com/edit/react-5aswfz-xkwtgy?file=index.js

Code Snippet:

<SeriesDirective dataSource={data1} tooltipMappingName='toolTipMappingName' xName='x' columnSpacing={0} columnWidth={1} yName='y' name='Gold' type='Column'/>  

Screenshot:

Query2: How to control the width of each column?

We can control the width of the column by setting the columnWidthInPixel property to the pixel value of the series. We have created a react application to demonstrate the same. Please find the below stackblitz link for your reference.

Sample link: https://stackblitz.com/edit/react-5aswfz-gfy4zo?file=index.js

Code Snippet:

<SeriesDirective dataSource={data1} xName='x' columnWidthInPixel={15} yName='y' name='Gold' type='Column'/>   

Screenshot:

Query 3: How to set the color for each column.

We can set different color for each column by setting the color value in any of the property in the dataSource, then map that field to the pointColorMapping property in the series of the chart. We have created a react application to demonstrate the same. Please find the below stackblitz link for your reference.

Sample link: https://stackblitz.com/edit/react-dnqjvh-8tkntk?file=index.js

Code Snippet:

export let data1 = [

    { x: 'Project 1', y: 27, color: "red" },

    { x: 'Project 2', y: 26, color: "blue" },

    { x: 'Project 3', y: 8, color: "green" },

    { x: 'Project 4', y: 19, color: "yellow" }];  

 

<SeriesDirective dataSource={data1} tooltipMappingName='toolTipMappingName' xName='x' columnSpacing={0.1} yName='y' name='Gold' type='Column' pointColorMapping="color"/>

                    </SeriesCollectionDirective>    

Screenshot:

Kindly, revert us if you have any concerns.

Regards,

Swetha