Disappearing javascript charts - Uncaught TypeError: node.getAttribute is not a function
We are generating charts via both amcharts5 (https://www.amcharts.com/) and chart.js (https://www.chartjs.org/) but we have the problem that the charts are disappearing after we include paged.js.
I put a jsfiddle here: https://jsfiddle.net/1o3meah5/1/
We see that others have the same problem: https://stackoverflow.com/questions/75299073/chartjs-chart-broke-when-using-pagedjs
Is there any solution to this?
Here is the code from jsfiddle:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paged.js with amcharts</title>
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script>
window.PagedConfig = {
auto: true // set this to false to see the chart.
};
</script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style>
@media screen {
.pagedjs_pages {
display: flex;
width: 500px;
flex: 0;
flex-wrap: wrap;
margin: 0 auto;
justify-content: center;
}
.pagedjs_page {
border: solid 1px #000;
background-color: #fff;
margin: 0;
flex-shrink: 0;
flex-grow: 0;
margin-top: 10mm;
}
}
@media print {
@page {
margin: 25mm;
size: a4;
bleed: 6mm;
@bottom-right {
content: "Page " counter(page) " of " counter(pages);
}
h1 {
break-before: page;
}
}
</style>
</head>
<body>
<div>
<h1>Chart</h1>
<div id="chartdiv" style="width:400px;height:300px;"></div>
</div>
<script>
// Generate chart:
// example from here: https://www.amcharts.com/demos/column-with-rotated-series/
am5.ready(function() {
var root = am5.Root.new("chartdiv");
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: true,
panY: true,
wheelX: "panX",
wheelY: "zoomX",
pinchZoomX: true
}));
var xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
xRenderer.labels.template.setAll({
rotation: -90,
centerY: am5.p50,
centerX: am5.p100,
paddingRight: 15
});
xRenderer.grid.template.setAll({location: 1})
var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
maxDeviation: 0.3,
categoryField: "country",
renderer: xRenderer,
tooltip: am5.Tooltip.new(root, {})
}));
var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
maxDeviation: 0.3,
renderer: am5xy.AxisRendererY.new(root, {
strokeOpacity: 0.1
})
}));
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Series 1",
xAxis: xAxis,
yAxis: yAxis,
valueYField: "value",
sequencedInterpolation: true,
categoryXField: "country",
tooltip: am5.Tooltip.new(root, {
labelText: "{valueY}"
})
}));
var data = [{
country: "USA",
value: 2025
}, {
country: "China",
value: 1882
}, {
country: "Japan",
value: 1809
}];
xAxis.data.setAll(data);
series.data.setAll(data);
}); // end am5.ready()
</script>
</body>
</html>