function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Brooks Johnson 6Brooks Johnson 6 

Center a Visualforce Chart in Lightning

I have a simple Visualforce Pie Chart that I wanted to use in Lightning. When I add it to a record page the chart aligns left. I would like to be in the center but don't seem to be able to adjust it's positioning. Can this be done with CSS when it is being used on a Lightning  Record Page?
 
<apex:page controller="CampaignPieChartController" title="Campaign Metrics" lightningStylesheets="true">
   <div style="margin: 0px auto">
    <apex:chart height="300" width="300" data="{!pieData}" resizable="true">
        <apex:legend position="bottom" font="14px Helvetica"/>
        <apex:pieSeries dataField="data" labelField="name"
                        colorSet="#008CC3,#F0B428,#B42846">
        <apex:chartLabel display="outside" font="bold 18px Helvetica"/>
        </apex:pieSeries>
    </apex:chart>
    </div>
</apex:page>

 
Best Answer chosen by Brooks Johnson 6
Raj VakatiRaj Vakati
try like this .. use "slds-align_absolute-center" class 
https://www.lightningdesignsystem.com/utilities/alignment/
<apex:page controller="CampaignPieChartController" title="Campaign Metrics" lightningStylesheets="true">
   <div style="slds-align_absolute-center">
    <apex:chart height="300" width="300" data="{!pieData}" resizable="true">
        <apex:legend position="bottom" font="14px Helvetica"/>
        <apex:pieSeries dataField="data" labelField="name"
                        colorSet="#008CC3,#F0B428,#B42846">
        <apex:chartLabel display="outside" font="bold 18px Helvetica"/>
        </apex:pieSeries>
    </apex:chart>
    </div>
</apex:page>

 

All Answers

Raj VakatiRaj Vakati
try like this .. use "slds-align_absolute-center" class 
https://www.lightningdesignsystem.com/utilities/alignment/
<apex:page controller="CampaignPieChartController" title="Campaign Metrics" lightningStylesheets="true">
   <div style="slds-align_absolute-center">
    <apex:chart height="300" width="300" data="{!pieData}" resizable="true">
        <apex:legend position="bottom" font="14px Helvetica"/>
        <apex:pieSeries dataField="data" labelField="name"
                        colorSet="#008CC3,#F0B428,#B42846">
        <apex:chartLabel display="outside" font="bold 18px Helvetica"/>
        </apex:pieSeries>
    </apex:chart>
    </div>
</apex:page>

 
This was selected as the best answer
Brooks Johnson 6Brooks Johnson 6
Thank you, for some reason I didn't think you could use SLDS in VIsualforce