Ignite UI Add padding using custom style

State Not Answered
Replies 3 replies
Subscribers 8 subscribers
Views 1342450 views
Users 0 members are here

180

Muhammad Hashir posted over 2 years ago

How to add padding to custom styles for the column chart for the follwing code

 public assigningBigDotOverlayStyle(data: any,brush:any) {

    debugger;
    let args = data.args;

    args.fill = brush;
    args.stroke = brush;
    args.paddingLeft = "12px";
    args.paddingRight = "12px";

  }
HTML:
                             <igx-column-series *ngIf="keyIndicators.type=='line-series'" [xAxis]="xAxis"
                                    [yAxis]="yAxis2" legend="legend" 
                                    [dataSource]="[pointsdata]"
                                    valueMemberPath="{{keyIndicators.valuetomap}}"
                                     isCustomCategoryStyleAllowed="true"
                                    (assigningCategoryStyle)="assigningBigDotOverlayStyle($event,keyIndicators.historybrush ? keyIndicators.historybrush : keyIndicators.brush )"
                                    [tooltipTemplate]="bigpointstooltip" 
                                    markerType="Hidden" markerOutline="transparent"
                                    showDefaultTooltip="false"
                                    brush="{{keyIndicators.brush}}"
                                    >
                                </igx-column-series>

29105

Offline Michael DiFilippo posted over 2 years ago in reply to Muhammad Hashir

Hello,

Please provide a screenshot. With only 1 column all you need to do is set the xAxisGap property to 1.

Alternatively you an try setting the plot area margin properties but this doesn't make sense for column series since there is already auto adjusts to the center.

eg.

https://stackblitz.com/edit/github-aymyp2
Cancel
Reply

Cancel
180

Offline Muhammad Hashir posted over 2 years ago in reply to Michael DiFilippo

I tried to apply gap the padding not added in case of one column chart only how to fix this can you share any example and space
Cancel
Reply

Cancel
29105

Offline Michael DiFilippo posted over 2 years ago

Hello,

Thank you for contacting Infragistics. My first recommendation is to use the built-in Gap properties to apply padding between the columns in the series.

eg.

https://es.infragistics.com/angularsite/components/charts/features/chart-axis-options#axis-gap-example

If this doesn't suit your requirements please attach a screenshot of your desired behavior.
Cancel
Reply

Cancel