I'm developing a web application using React. I want to export a chart and data to a single PDF page. Trying to do this, I'm getting the following error
pdfmake.js:29058 Uncaught Error: unsupported number: 00940155.184155.1840040
at t.number (pdfmake.js:29058)
at r.lineTo (pdfmake.js:37584)
at d (pdfmake.js:2733)
at f (pdfmake.js:2601)
at r.createPdfKitDocument (pdfmake.js:2392)
at i._createDoc (pdfmake.js:104)
at i.getBuffer (pdfmake.js:242)
at i.getDataUrl (pdfmake.js:222)
at Object.toPDF (export.min.js:1)
at Object.<anonymous> (TestLineChart.jsx:105)
what is reason for that?
Code is below
TestLineChart.jsx
chart.export.capture({}, function () {
this.toJPG({}, function (data) {
let chartHeder = document.getElementById('chartHeder').innerText;
images.push({
"text": chartHeder,
"fontSize": 15
});
images.push({
'image': data,
"fit": [523.28, 769.89]
});
images.push({
"text": '\n\n',
"fontSize": 15
});
images.push({
"table": {
"headerRows": 1,
"widths": columnStyleArray,
"body": [ //chart.dataProvider
["DATE VARIANCE", "CURRENT YEAR VARIANCE", "LAST YEAR VARIANCE"],
["5000", "4500", "5100"],
["5000", "4500", "5100"],
["5000", "4500", "5100"],
]
}
});
chart.export.toPDF({
content: images
}, function (data) {
let fileName = chartHeder.split(' /')[0] + '_' + chart.dataProvider[0].date + ' - ' + chart.dataProvider[chart.dataProvider.length - 1].date;
this.download(data, "application/pdf", fileName + ".pdf");
});
});
});
there are line 105 is chart.export.toPDF, I use this example to develop this code.
Here is the jsfiddle
Looking at your jsfiddle, It's funny but your only problem is, In your table your first width
value is missing %
so change it to "40%"
Here I updated your jsfiddle
notice I only changed the table's width property
from "widths": ["40", "30%", "30%"]
to "widths": ["40%", "30%", "30%"]
adding %
to the first value.