function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Mauricio RamalhoMauricio Ramalho 

apex:Chart VS Bootstrap conflict

I used this arcticle on Salesforce's documentation to plot some graphic on Visualforce Pages using the apex:chart tag, but it seems that it is not possible to use chart tags and bootstrap on the same page.

The exact same code sample, but only adding the Bootstrap header link causes the graphic to blank out and not render at all.

Bootstrap on the header 
<apex:page controller="ChartController">
<html lang="en">
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    </head>
    <body>
         <apex:chart height="400" width="700" 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>
    </body>
</html>
</apex:page>

The data is still there as it is possible to hover the mouse over the invisible data marks.

Am I missing something? Is there a workaround for this?
 
karthikeyan perumalkarthikeyan perumal
Hello, 

you did't missing nothing.. your CSS file will not ref propery. 

Follow below steps : 

Download the css file from this location and save it in your local. 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 

Create zip file thats contains your css file in your case ( bootstrap.min.css) name it as "bootstrapmin.rar"

Upload the zip file in "static resource"  name as "ChartCSS"

All set now. 

replace your <head></head> section with this  below code: 
  
<apex:stylesheet value="{!URLFOR($Resource.ChartCSS, 'bootstrap.min.css')}"/>

Full VF page code :  
<apex:page controller="ChartController">
<html lang="en">
    
       <apex:stylesheet value="{!URLFOR($Resource.ChartCSS, 'bootstrap.min.css')}"/>
     
    <body>
         <apex:chart height="400" width="700" 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>
    </body>
</html>
</apex:page>


Output: 
User-added image

Hope this will help you to solve your issue. 

Thanks
karthik