Копировать изменения первого графика во второй в Chart.js

Question

У меня есть линейный график, и мне нужно сохранить его в формате PDF высокого качества. Когда нажимается кнопка «скачать PDF», я создаю большую диаграмму во втором скрытом холсте, после завершения анимации PDF создается с помощью jsPDF. На данный момент все прекрасно работает.

Если у меня на графике больше линий, то при нажатии на метку соответствующая линия становится скрытой. Теперь я хочу скачать PDF с измененной диаграммой, но вот проблема: вторая диаграмма все еще сохраняет исходные данные первой диаграммы. Я думаю, потому что данные создаются, когда страница загружается, и нажатие на метку текущего графика работает на «клиентском» экземпляре графика.

Есть ли способ получить доступ к текущему экземпляру (со скрытой линией) и отправить эти данные на второй график?

Некоторые изображения: картина с двумя линиями, второй большой холст ОК

картинка со скрытой линией, второй большой холст НЕПРАВИЛЬНО

Мой код:

    <canvas id="canvas" ></canvas>
    <script>
        var chartData = {"labels":["2019-06-17 22:01:00","2019-06-18 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-06-19 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-06-20 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-06-21 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-06-22 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-06-23 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-06-24 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-06-25 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-06-26 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-06-27 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-06-28 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-06-29 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-06-30 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-07-01 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-07-02 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-07-03 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-07-04 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-07-05 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00"],"datasets":[{"label":"Cella 33","borderColor":"#FF0000","borderWidth":1,"backgroundColor":"transparent","data":["71.09900","71.09900","71.12500","71.12500","71.15000","71.11200","71.11200","71.09900","71.12500","71.11200","71.15000","71.11200","71.08700","71.08700","71.08700","71.11200","71.15000","71.09900","71.08700","71.07500","71.12500","71.12500","71.18700","71.16200","71.15000","71.15000","71.15000","71.18700","71.22400","71.18700","71.17500","71.21200","71.23700","71.25000","71.33700","71.13700","71.11200","71.15000","71.21200","71.27500","71.20000","71.09900","71.06200","71.06200","71.07500","71.08700","71.09900","71.08700","71.05000","71.03700","71.05000","71.06200","71.08700","71.08700","71.05000","71.02500","71.03700","71.05000","71.07500","71.08700","71.03700","71.01200","71.01200","71.01200","71.05000","71.06200","71.02500","70.99900","70.99900","70.99900","71.03700","71.03700","70.99900","70.98700","70.98700","70.97400","71.02500","71.02500","70.98700","70.97400","70.96200","70.96200","70.99900","70.99900","70.96200","70.95000","70.95000","70.93700","70.97400","70.99900","70.96200","70.95000","70.93700","70.95000","70.97400","70.95000","70.96200","70.97400","70.99900","71.01200","71.07500","70.96200","70.95000","70.95000","70.97400","70.98700","71.02500","70.96200"]},{"label":"Cella 34","borderColor":"#008000","borderWidth":1,"backgroundColor":"transparent","data":["68.48700","68.40000","68.36200","68.28700","68.32500","68.50000","68.50000","68.40000","68.32500","68.26200","68.26200","68.47400","68.45000","68.40000","68.40000","68.33700","68.37400","68.56200","68.50000","68.41200","68.34900","68.27500","68.27500","68.37400","68.33700","68.27500","68.23700","68.15000","68.06200","68.20000","68.22500","68.12500","68.11200","68.07500","67.96200","68.33700","68.28700","68.17400","68.07500","67.97400","68.16200","68.58700","68.70000","68.59900","68.52500","68.45000","68.50000","68.93700","68.88700","68.75000","68.65000","68.56200","68.59900","68.98700","68.92500","68.79900","68.68700","68.59900","68.67400","69.05000","68.99900","68.88700","68.75000","68.67400","68.71200","69.01200","68.95000","68.82500","68.73700","68.58700","68.62500","68.98700","68.93700","68.81200","68.70000","68.65000","68.72500","69.01200","68.96200","68.84900","68.76200","68.66200","68.75000","68.90000","68.48700","68.37400","68.32500","68.32500","68.27500","68.47400","68.42500","68.32500","68.29900","68.25000","68.28700","68.15000","68.06200","68.06200","68.06200","68.01200","67.90000","68.31200","68.20000","68.08700","68.05000","67.97400","68.07500","68.46200"]}]};

        var myLine1 = new Chart(document.getElementById("canvas").getContext("2d"),{
            data: chartData,
            type: "line",
            options: {
                scaleShowValues: true,
                scales: {
                    xAxes: [{
                        ticks: {
                            autoSkip: true
                        }
                    }]
                }
            }
        });

    </script>

    <button id="downloadPDF" onClick="downloadPDF()">scarica pdf</button>

    <canvas id="canvashq" hidden></canvas>

    <script>
        function downloadPDF() {
            var sizes = {};
            sizes['docWidth'] = 297;
            sizes['docHeight'] = 210;
            sizes['marginLeft'] = 10;
            sizes['marginRigth'] = 10;
            sizes['marginTop'] = 10;
            sizes['marginBottom'] = 10;
            sizes['docHeader'] = 12;
            sizes['docFooter'] = 8;
            sizes['graphWidth'] = sizes['docWidth']-sizes['marginLeft']-sizes['marginRigth'];
            sizes['graphHeight'] = sizes['docHeight']-sizes['marginTop']-sizes['marginBottom']-sizes['docHeader']-sizes['docFooter'];
            sizes['canvasWidth'] = 3000;
            sizes['canvasHeight'] = sizes['canvasWidth']*sizes['graphHeight']/sizes['graphWidth'];

            // commented for debug 
            //document.getElementById("canvashq").style.display = "none";               
            document.getElementById("canvashq").width = sizes['canvasWidth'];
            document.getElementById("canvashq").height = sizes['canvasHeight'];

            var chartHQ = new Chart(document.getElementById("canvashq").getContext("2d"),{
                data: myLine1.data,
                type: "line",
                options: {
                    responsive: false,
                    maintainAspectRatio: false,
                    bezierCurve : false,
                    scaleShowValues: true,
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: false
                            }
                        }],
                        xAxes: [{
                            ticks: {
                                autoSkip: false
                            }
                        }]
                    },
                    animation: {
                        onComplete: function(){
                            var imgChartHQ = chartHQ.toBase64Image();
                            var doc = new jsPDF('l','mm','a4');
                            doc.addImage(imgChartHQ,'png',sizes['marginLeft'],sizes['marginTop']+sizes['docHeader'],sizes['graphWidth'],sizes['graphHeight']);
                            doc.save('sample-file.pdf');
                        }
                    }
                }
            });
        }

    </script>