After an onclick event, I am using css2pdf to save my svg chart to pdf. It functions perfectly with plotly.js, but unfortunately not with c3.js - you can check out my fiddle here: http://jsfiddle.net/3hs7cs4f/
I suspect the issue lies within the c3.js svg properties, yet I am unsure how to resolve it.
Below is the code snippet:
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="http://www.cloudformatter.com/Resources/Pages/CSS2Pdf/Scrip /xeponline.jqplugin.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>
<body>
<br><br>
<!-- Source and on-click event for plotly.js -->
<div id="plotly_chart" style="width: 90%; height: 270px"></div>
<button onclick="return xepOnline.Formatter.Format('plotly_chart',{pageWidth:'11in', pageHeight:'8.5in',render:'download', srctype:'svg'});">Get plotly_PDF</button>
<!-- Source and on-click event for c3.js-->
<div id="c3_chart" style="width: 90%; height: 270px"></div>
<button onclick="return xepOnline.Formatter.Format('c3_chart',{pageWidth:'11in', pageHeight:'8.5in',render:'download', srctype:'svg'});">Get c3_PDF</button>
<!-- JAVASCRIPT for plotly.js chart -->
<script type="text/javascript">
Chart = document.getElementById('plotly_chart');
Plotly.plot( Chart, [{
x: [1, 2, 3, 4, 5],
y: [1, 2, 4, 8, 16] }], {
margin: { t: 0 } } );
</script>
<!-- JAVASCRIPT for j3.js chart -->
<script type="text/javascript">
var chart = c3.generate({
bindto: '#c3_chart',
padding: {
top: 10,
right: 70,
bottom: 50,
left: 75,
},
data: {
columns: [
['data1', 100, 200, 150, 300, 200],
['data2', 400, 500, 250, 700, 300],
]
}});
</script>
My attempts to save c3.js charts in various methods have been unsuccessful. The only solution that has worked for me is the ng-c3 exporter from annatomka, utilizing the AngularJS module (https://github.com/annatomka/ng-c3-export). However, this method does not provide full control over css settings, and the downloaded png quality is limited by screen resolution. Therefore, I am keen on finding a pdf exporter, specifically css2pdf which seems to handle all css settings. Any suggestions or alternative methods to save c3 chart as pdf are greatly appreciated. Thank you for your assistance!