I'm using the chart's library C3.js in a Visualforce page. I'm loading the C3.js library using static resources. Everything works great in Salesforce Classic, the beautiful charts show up like expected. But in Lightning Experience, with the exact same Visualforce page, the charts do not display.
I checked the source files in Chrome dev tool, all files are loading. No errors are shown in the Chrome dev console either, just a few warnings that generally I don't understand.
Here is my Visualforce page code:
<apex:page standardController="Opportunity" showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<html>
<head>
<title>Test</title>
<apex:stylesheet value="{!URLFOR($Resource.C3Charts, '/c3.min.css')}" />
</head>
<body>
<div id="myChart1"></div>
<apex:includeScript value="{!URLFOR($Resource.jquery310)}"/>
<apex:includeScript value="{!URLFOR($Resource.C3Charts, '/d3.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.C3Charts, '/c3.min.js')}"/>
<script>
$( document ).ready(function() {
var chart = c3.generate({
bindto: '#myChart1',
data: {
columns: [
['Intersection Growth', 25]
],
type: 'gauge',
onclick: function (d, i) { console.log("onclick", d, i); },
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
},
gauge: {
},
color: {
pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], // the three color levels for the percentage values.
threshold: {
values: [30, 60, 90, 100]
}
},
size: {
height: 170
}
});
});
</script>
</body>
</html>
</apex:page>
Can any help me with this? Thanks!