[SalesForce] How to make visual force charting responsive

1)We can able to build visual force charting but we need the visual force charting for responsive like different screen size for different devices with same code.

Best Answer

apex:chart uses SVG to do its drawing using the width and height provided to calculate the locations of the various lines and text. So articles like this Make SVG Responsive are relevant.

To see if this "Make SVG Responsive" technique might work I took the first sample controller and page from Building a Complex Chart with Visualforce Charting. I then added the suggested styling using a class name vf-surface (that "Inspect Element" shows is presently added by apex:chart to the div surrounding the svg element).

The resulting page is this:

<apex:page controller="ChartController">
<style type="text/css">
.vf-surface {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    vertical-align: middle;
    overflow: hidden;
}
</style>
    <apex:chart height="300" width="300" data="{!data}">
          <apex:axis type="Numeric" position="left" fields="data1" 
            title="Opportunities Closed" grid="true"/>
          <apex:axis type="Category" position="bottom" fields="name" 
            title="Month of the Year">
        </apex:axis>
        <apex:lineSeries axis="left" fill="true" xField="name" yField="data1"
          markerType="cross" markerSize="4" markerFill="#FF0000"/>
   </apex:chart>
</apex:page>

At least on Chrome, this does result in the chart being rendered to fit the page size at rendering time.

Related Topic