I would like to download my current react-google-timeline-chart in pdf format and the chart is showing up but not the date. I really don't know how to export the whole chart with date. I am very new at react-google-timeline-chart Any help would much be appreciated! Here is my example code:
import React from "react";
import ReactDOM from "react-dom";A
import Chart from "react-google-charts";
import html2canvas from 'html2canvas';
const pdfConverter = require('jspdf');
// Reference : https://developers.google.com/chart/interactive/docs/gallery/timeline
const columns = [
{ type: "string", id: "President" },
{ type: "date", id: "Start" },
{ type: "date", id: "End" }
];
const rows = [
["Washington", new Date(1789, 3, 30), new Date(1797, 2, 4)],
["Adams", new Date(1797, 2, 4), new Date(1801, 2, 4)],
["Jefferson", new Date(1801, 2, 4), new Date(1809, 2, 4)]
];
class App extends React.Component {
demoFromHTML() {
let input = window.document.getElementById('divToPDF');
html2canvas(input)
.then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const pdf = new pdfConverter('l', 'pt');
pdf.addImage(imgData, 'JPEG', 15, 110, 800, 250);
pdf.save('test.pdf');
});
}
render () {
return (
<div id="divToPDF">
<Chart
chartType="Timeline"
rows={...rows}
columns={columns}
width="100%"
height="400px"
options={{
colors: ['#98719D', '#A0BD85', '#5DBAD9'],
}}
/>
<div>
<button onClick={() => this.demoFromHTML()}>PDF FILE</button>
</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Screenshot of timeline chart that I want:
