Chartjs-ChartJS Recreate Chart

0👍

Closes I can come for you is this:

let data = [59.0, 57.0, 57.0, 58.0, 57.0, 56.0, 57.0, 55.0, 62.0, 63.0, 62.0, 62.0, 69.0, 63.0, 62.0, 61.0, 62.0, 62.0, 66.0, 69.0, 72.0, 72.0, 75.0, 82.0, 84.0, 85.0, 84.0, 81.0, 91.0, 90.0, 87.0, 87.0, 89.0, 90.0, 90.0, 86.0, 86.0, 86.0, 86.0, 83.0, 83.0, 82.0, 81.0, 85.0, 89.0, 85.0, 83.0, 87.0, 81.0, 81.0, 81.0, 91.0, 90.0, 81.0, 87.0, 83.0, 98.0, 90.0, 81.0, 88.0, 88.0, 88.0, 88.0, 90.0, 90.0, 90.0, 92.0, 90.0, 91.0, 90.0, 88.0, 81.0, 83.0, 91.0, 88.0, 87.0, 87.0, 87.0, 87.0, 87.0, 87.0, 87.0, 88.0, 90.0, 87.0, 88.0, 91.0, 88.0, 86.0, 86.0, 87.0, 86.0, 91.0, 90.0, 91.0, 92.0, 91.0, 91.0, 88.0, 87.0, 88.0, 95.0, 94.0, 92.0, 92.0, 91.0, 88.0, 88.0, 90.0, 88.0, 90.0, 87.0, 87.0, 88.0, 88.0, 91.0, 88.0, 91.0, 94.0, 90.0, 90.0, 88.0, 88.0, 87.0, 88.0, 87.0, 88.0, 86.0, 86.0, 87.0, 87.0, 88.0, 90.0, 88.0, 79.0, 74.0, 83.0, 85.0, 83.0, 85.0, 85.0, 85.0, 85.0, 85.0, 83.0, 90.0, 85.0, 85.0, 85.0, 85.0, 85.0, 86.0, 87.0, 87.0, 91.0, 90.0, 90.0, 90.0, 90.0, 90.0, 86.0, 85.0, 85.0, 86.0, 86.0, 86.0, 86.0, 85.0, 85.0, 86.0, 86.0, 85.0, 85.0, 83.0, 85.0, 87.0, 85.0, 86.0, 88.0, 88.0, 88.0, 86.0, 91.0, 92.0, 88.0, 85.0, 87.0, 86.0, 86.0, 85.0, 86.0, 86.0, 87.0, 87.0, 88.0, 87.0, 92.0, 88.0, 83.0, 85.0, 87.0, 87.0, 90.0, 85.0, 87.0, 87.0, 86.0, 85.0, 85.0, 87.0, 87.0, 88.0, 90.0, 91.0, 86.0, 87.0, 87.0, 86.0, 90.0, 87.0, 90.0, 90.0, 94.0, 92.0, 91.0, 87.0, 87.0, 88.0, 90.0, 91.0, 92.0, 90.0, 86.0, 88.0, 87.0, 87.0, 88.0, 87.0, 88.0, 88.0, 87.0, 88.0, 87.0, 87.0, 87.0, 88.0, 88.0, 91.0, 90.0, 90.0, 91.0, 91.0, 87.0, 90.0, 92.0, 87.0, 86.0, 88.0, 88.0, 88.0, 88.0, 92.0, 92.0, 81.0, 78.0, 79.0, 83.0, 86.0, 87.0, 88.0, 87.0, 87.0, 85.0, 85.0, 87.0, 87.0, 87.0, 87.0, 86.0, 86.0, 85.0, 86.0, 86.0, 85.0, 85.0, 87.0, 86.0, 88.0, 90.0, 91.0, 90.0, 95.0, 97.0, 98.0, 95.0, 97.0, 97.0, 97.0, 97.0, 98.0, 95.0, 95.0, 108.0, 95.0, 95.0, 95.0, 91.0, 78.0, 83.0, 82.0, 92.0, 89.0, 88.0, 85.0, 86.0, 94.0, 94.0, 97.0, 99.0, 99.0, 97.0, 95.0, 91.0, 92.0, 94.0, 95.0, 92.0, 94.0, 94.0, 95.0, 92.0, 94.0, 94.0, 95.0, 95.0, 92.0, 94.0, 97.0, 95.0, 95.0, 94.0, 102.0, 104.0, 99.0, 98.0, 95.0, 94.0, 91.0, 94.0, 94.0, 91.0, 92.0, 91.0, 92.0, 97.0, 94.0, 92.0, 91.0, 97.0, 95.0, 109.0, 112.0, 112.0, 112.0, 110.0, 112.0, 112.0, 109.0, 110.0, 112.0, 109.0, 105.0, 104.0, 102.0, 100.0, 105.0, 102.0, 102.0, 105.0, 107.0, 105.0, 105.0, 104.0, 104.0, 105.0, 107.0, 102.0, 104.0, 104.0, 102.0, 105.0, 105.0, 104.0, 104.0, 107.0, 104.0, 102.0, 105.0, 105.0, 105.0, 105.0, 105.0, 105.0, 107.0, 105.0, 102.0, 104.0, 104.0, 104.0, 105.0, 107.0, 105.0, 109.0, 109.0, 109.0, 109.0, 105.0, 107.0, 107.0, 107.0, 105.0, 105.0, 110.0, 112.0, 107.0, 107.0, 105.0, 105.0, 109.0, 107.0, 107.0, 107.0, 109.0, 105.0, 109.0, 110.0, 109.0, 110.0, 107.0, 112.0, 117.0, 110.0, 109.0, 116.0, 114.0, 112.0, 112.0, 110.0, 110.0, 109.0, 104.0, 112.0, 116.0, 114.0, 116.0, 112.0, 112.0, 112.0, 112.0, 112.0, 110.0, 109.0, 105.0, 112.0, 114.0, 110.0, 110.0, 114.0, 116.0, 112.0, 107.0, 112.0, 107.0, 110.0, 109.0, 110.0, 107.0, 109.0, 110.0, 114.0, 110.0, 110.0, 114.0, 112.0, 112.0, 116.0, 117.0, 117.0, 117.0, 114.0, 114.0, 109.0, 109.0, 110.0, 107.0, 109.0, 110.0, 109.0, 109.0, 107.0, 112.0, 112.0, 112.0, 112.0, 114.0, 110.0, 107.0, 109.0, 110.0, 109.0, 110.0, 114.0, 112.0, 109.0, 114.0, 110.0, 112.0, 114.0, 116.0, 110.0, 112.0, 112.0, 119.0, 121.0, 119.0, 117.0, 114.0, 110.0, 114.0, 107.0, 107.0, 107.0, 109.0, 105.0, 104.0, 105.0, 105.0, 104.0, 104.0, 102.0, 104.0, 105.0, 102.0, 105.0, 102.0, 107.0, 104.0, 109.0, 109.0, 109.0, 109.0, 109.0, 109.0, 107.0, 107.0, 109.0, 109.0, 112.0, 110.0, 110.0, 110.0, 112.0, 109.0, 110.0, 107.0, 107.0, 112.0, 110.0, 109.0, 109.0, 109.0, 114.0, 112.0, 109.0, 107.0, 112.0, 109.0, 110.0, 107.0, 110.0, 112.0, 112.0, 109.0, 105.0, 105.0, 105.0, 109.0, 107.0, 110.0, 109.0, 109.0, 107.0, 107.0, 107.0, 112.0, 114.0, 109.0, 109.0, 107.0, 107.0, 105.0, 107.0, 107.0, 105.0, 105.0, 104.0, 107.0, 116.0, 114.0, 112.0, 112.0, 112.0, 110.0, 110.0, 107.0, 95.0, 94.0, 80.0, 83.0, 85.0, 92.0, 98.0, 100.0, 98.0, 98.0, 97.0, 100.0, 104.0, 107.0, 105.0, 102.0, 100.0, 100.0, 100.0, 102.0, 102.0, 100.0, 104.0, 107.0, 105.0, 107.0, 104.0, 102.0, 104.0, 102.0, 102.0, 102.0, 104.0, 117.0, 98.0, 102.0, 104.0, 104.0, 102.0, 100.0, 100.0, 104.0, 107.0, 107.0, 104.0, 104.0, 104.0, 104.0, 102.0, 104.0, 104.0, 104.0, 107.0, 110.0, 112.0, 112.0, 109.0, 105.0, 119.0, 104.0, 91.0, 88.0, 95.0, 105.0, 104.0, 104.0, 104.0, 102.0, 109.0, 105.0, 100.0, 102.0, 104.0, 104.0, 105.0, 104.0, 105.0, 102.0, 104.0, 104.0, 102.0, 102.0, 100.0, 104.0, 104.0, 109.0, 105.0, 104.0, 114.0, 116.0, 112.0, 110.0, 110.0, 112.0, 107.0, 112.0, 109.0, 107.0, 107.0, 107.0, 107.0, 105.0, 104.0, 104.0, 102.0, 102.0, 107.0, 105.0, 105.0, 107.0, 102.0, 105.0, 107.0, 109.0, 112.0, 109.0, 107.0, 104.0, 105.0, 105.0, 107.0, 105.0, 107.0, 105.0, 105.0, 109.0, 107.0, 107.0, 107.0, 105.0, 105.0, 110.0, 110.0, 109.0, 105.0, 105.0, 104.0, 107.0, 104.0, 104.0, 104.0, 102.0, 104.0, 104.0, 107.0, 105.0, 102.0, 102.0, 104.0, 105.0, 102.0, 107.0, 105.0, 107.0, 104.0, 107.0, 105.0, 102.0, 104.0, 102.0, 105.0, 105.0, 107.0, 107.0, 109.0, 107.0, 109.0, 107.0, 109.0, 109.0, 109.0, 110.0, 109.0, 107.0, 105.0, 105.0, 107.0, 110.0, 107.0, 109.0, 105.0, 109.0, 107.0, 109.0, 109.0, 110.0, 109.0, 104.0, 104.0, 110.0, 112.0, 112.0, 114.0, 117.0, 112.0, 114.0, 112.0, 112.0, 110.0, 121.0, 117.0, 117.0, 112.0, 114.0, 116.0, 110.0, 109.0, 112.0, 110.0, 110.0, 107.0, 105.0, 105.0, 105.0, 105.0, 100.0, 107.0, 105.0, 105.0, 105.0, 109.0, 105.0, 107.0, 102.0, 102.0, 107.0, 104.0, 105.0, 104.0, 100.0, 102.0, 102.0, 102.0, 107.0, 107.0, 105.0, 102.0, 98.0, 102.0, 105.0, 105.0, 107.0, 109.0, 107.0, 100.0, 100.0, 98.0, 100.0, 100.0, 102.0, 102.0, 102.0, 102.0, 104.0, 107.0, 104.0, 107.0, 105.0, 102.0, 105.0, 107.0, 112.0, 107.0, 107.0, 107.0, 105.0, 105.0, 105.0, 109.0, 109.0, 107.0, 109.0, 110.0, 109.0, 107.0, 107.0, 102.0, 102.0, 107.0, 112.0, 112.0, 112.0, 112.0, 109.0, 105.0, 109.0, 109.0, 109.0, 116.0, 110.0, 107.0, 107.0, 116.0, 110.0, 104.0, 107.0, 107.0, 110.0, 116.0, 116.0, 119.0, 112.0, 112.0, 109.0, 109.0, 107.0, 110.0, 114.0, 112.0, 110.0, 116.0, 109.0, 110.0, 110.0, 116.0, 110.0, 109.0, 110.0, 107.0, 107.0, 105.0, 107.0, 114.0, 109.0, 109.0, 105.0, 105.0, 102.0, 109.0, 109.0, 105.0, 107.0, 105.0, 104.0, 105.0, 109.0, 107.0, 105.0, 112.0, 114.0, 112.0, 114.0, 116.0, 118.0, 115.0, 115.0, 115.0, 116.0, 122.0, 118.0, 116.0, 115.0, 113.0, 113.0, 113.0, 116.0, 118.0, 118.0, 120.0, 118.0, 115.0, 109.0, 111.0, 116.0, 113.0, 111.0, 113.0, 120.0, 118.0, 115.0, 115.0, 113.0, 115.0, 111.0, 111.0, 107.0, 107.0, 106.0, 107.0, 106.0, 107.0, 111.0, 116.0, 115.0, 109.0, 111.0, 111.0, 109.0, 109.0, 113.0, 111.0, 113.0, 111.0, 109.0, 107.0, 107.0, 109.0, 107.0, 109.0, 109.0, 107.0, 107.0, 109.0, 107.0, 106.0, 106.0, 106.0, 107.0, 106.0, 104.0, 104.0, 111.0, 107.0, 104.0, 104.0, 104.0, 106.0, 106.0, 104.0, 107.0, 107.0, 104.0, 109.0, 124.0, 120.0, 115.0, 115.0, 113.0, 111.0, 113.0, 113.0, 118.0, 115.0, 116.0, 115.0, 115.0, 115.0, 115.0, 113.0, 115.0, 113.0, 99.0, 96.0, 104.0, 109.0, 107.0, 107.0, 111.0, 111.0, 111.0, 113.0, 113.0, 118.0, 116.0, 115.0, 111.0, 109.0, 109.0, 107.0, 109.0, 115.0, 111.0, 111.0, 113.0, 115.0, 111.0, 107.0, 107.0, 109.0, 111.0, 115.0, 115.0, 111.0, 109.0, 113.0, 116.0, 115.0, 115.0, 120.0, 116.0, 120.0, 115.0, 111.0, 113.0, 111.0, 113.0, 109.0, 107.0, 111.0, 106.0, 107.0, 113.0, 111.0, 115.0, 111.0, 107.0, 107.0, 111.0, 113.0, 109.0, 106.0, 107.0, 109.0, 109.0, 109.0, 107.0, 106.0, 107.0, 109.0, 111.0, 107.0, 107.0, 111.0, 113.0, 107.0, 109.0, 115.0, 109.0, 111.0, 107.0, 107.0, 111.0, 109.0, 111.0, 111.0, 111.0, 109.0, 111.0, 113.0, 115.0, 111.0, 116.0, 111.0, 106.0, 111.0, 107.0, 109.0, 106.0, 106.0, 107.0, 104.0, 104.0, 109.0, 109.0, 107.0, 106.0, 106.0, 107.0, 111.0, 109.0, 113.0, 111.0, 107.0, 111.0, 111.0, 109.0, 109.0, 111.0, 115.0, 113.0, 111.0, 115.0, 115.0, 113.0, 111.0, 116.0, 115.0, 115.0, 113.0, 113.0, 113.0, 113.0, 113.0, 115.0, 116.0, 116.0, 116.0, 113.0, 113.0, 109.0, 109.0, 115.0, 109.0, 100.0, 96.0, 89.0, 107.0, 104.0, 104.0, 109.0, 106.0, 111.0, 109.0, 104.0, 107.0, 109.0, 107.0, 107.0, 104.0, 107.0, 109.0, 109.0, 109.0, 115.0, 113.0, 109.0, 113.0, 109.0, 107.0, 106.0, 106.0, 109.0, 106.0, 104.0, 106.0, 106.0, 107.0, 107.0, 106.0, 109.0, 111.0, 109.0, 111.0, 111.0, 107.0, 111.0, 109.0, 111.0, 109.0, 106.0, 102.0, 106.0, 104.0, 102.0, 102.0, 102.0, 104.0, 109.0, 109.0, 106.0, 107.0, 109.0, 113.0, 115.0, 107.0, 107.0, 109.0, 102.0, 104.0, 106.0, 106.0, 107.0, 106.0, 111.0, 111.0, 107.0, 106.0, 104.0, 107.0, 106.0, 104.0, 109.0, 111.0, 111.0, 113.0, 107.0, 104.0, 106.0, 107.0, 109.0, 113.0, 109.0, 111.0, 116.0, 116.0, 115.0, 107.0, 107.0, 113.0, 109.0, 106.0, 102.0, 104.0, 109.0, 107.0, 107.0, 106.0, 104.0, 102.0, 107.0, 106.0, 104.0, 102.0, 104.0, 104.0, 102.0, 104.0, 111.0, 113.0, 113.0, 107.0, 109.0, 109.0, 109.0, 104.0, 106.0, 106.0, 109.0, 115.0, 113.0, 113.0, 111.0, 111.0, 111.0, 106.0, 109.0, 106.0, 106.0, 102.0, 102.0, 102.0, 102.0, 100.0, 102.0, 100.0, 100.0, 99.0, 97.0, 99.0, 100.0, 100.0, 99.0, 100.0, 99.0, 102.0, 104.0, 102.0, 99.0, 99.0, 102.0, 102.0, 100.0, 97.0, 97.0, 97.0, 97.0, 100.0, 99.0, 111.0, 111.0, 109.0, 107.0, 104.0, 115.0, 111.0, 111.0, 113.0, 115.0, 113.0, 115.0, 109.0, 109.0, 111.0, 109.0, 107.0, 107.0, 104.0, 106.0, 116.0, 115.0, 111.0, 111.0, 106.0, 106.0, 111.0, 107.0, 111.0, 111.0, 109.0, 106.0, 106.0, 104.0, 102.0, 104.0, 104.0, 106.0, 104.0, 104.0, 102.0, 100.0, 104.0, 102.0, 100.0, 99.0, 99.0, 100.0, 99.0, 100.0, 100.0, 100.0, 99.0, 100.0, 97.0, 99.0, 97.0, 102.0, 100.0, 100.0, 100.0, 99.0, 99.0, 97.0, 99.0, 97.0, 99.0, 96.0, 97.0, 96.0, 97.0, 96.0, 100.0, 104.0, 100.0, 104.0, 102.0, 106.0, 106.0, 104.0, 104.0, 102.0, 99.0, 113.0, 115.0, 109.0, 107.0, 111.0, 111.0, 113.0, 109.0, 109.0, 109.0, 115.0, 124.0, 124.0, 115.0, 118.0, 116.0, 115.0, 113.0, 122.0, 120.0, 116.0, 122.0, 118.0, 118.0, 120.0, 109.0, 113.0, 115.0, 111.0, 113.0, 113.0, 115.0, 116.0, 113.0, 115.0, 118.0, 115.0, 113.0, 113.0, 109.0, 107.0, 113.0, 109.0, 107.0, 107.0, 107.0, 109.0, 106.0, 107.0, 113.0, 118.0, 122.0, 122.0, 118.0, 118.0, 122.0, 120.0, 118.0, 113.0, 115.0, 115.0, 111.0, 120.0, 60.0, 116.0, 115.0, 115.0, 115.0, 113.0, 113.0, 113.0, 115.0, 111.0, 113.0, 109.0, 113.0, 111.0, 109.0, 99.0, 100.0, 96.0, 99.0, 102.0, 109.0, 102.0, 104.0, 111.0, 107.0, 107.0, 104.0, 107.0, 109.0, 107.0, 102.0, 104.0, 107.0, 109.0, 107.0, 106.0, 107.0, 107.0, 107.0, 107.0, 106.0, 111.0, 106.0, 104.0, 107.0, 111.0, 111.0, 107.0, 113.0, 109.0, 111.0, 109.0, 104.0, 106.0, 107.0, 107.0, 109.0, 111.0, 113.0, 109.0, 107.0, 107.0, 109.0, 111.0, 113.0, 111.0, 107.0, 109.0, 109.0, 106.0, 113.0, 109.0, 111.0, 109.0, 106.0, 109.0, 111.0, 107.0, 106.0, 107.0, 111.0, 113.0, 111.0, 109.0, 107.0, 109.0, 109.0, 109.0, 115.0, 115.0, 109.0, 116.0, 113.0, 109.0, 111.0, 116.0, 120.0, 113.0, 111.0, 113.0, 113.0, 111.0, 113.0, 111.0, 109.0, 107.0, 115.0, 115.0, 111.0, 113.0, 107.0, 107.0, 109.0, 109.0, 111.0, 111.0, 111.0, 111.0, 111.0, 113.0, 111.0, 113.0, 115.0, 111.0, 115.0, 111.0, 111.0, 111.0, 111.0, 109.0, 113.0, 115.0, 111.0, 109.0, 106.0, 109.0, 106.0, 109.0, 106.0, 111.0, 111.0, 113.0, 111.0, 111.0, 113.0, 111.0, 111.0, 109.0, 111.0, 109.0, 107.0, 107.0, 107.0, 111.0, 109.0, 113.0, 115.0, 111.0, 109.0, 109.0, 109.0, 116.0, 116.0, 115.0, 115.0, 113.0, 109.0, 106.0, 107.0, 107.0, 107.0, 106.0, 104.0, 104.0, 107.0, 107.0, 106.0, 104.0, 102.0, 102.0, 104.0, 102.0, 102.0, 106.0, 106.0, 104.0, 102.0, 100.0, 111.0, 109.0, 115.0, 128.0, 128.0, 120.0, 120.0, 120.0, 115.0, 116.0, 115.0, 115.0, 118.0, 120.0, 120.0, 124.0, 115.0, 118.0, 113.0, 111.0, 115.0, 113.0, 113.0, 113.0, 109.0, 107.0, 113.0, 111.0, 113.0, 109.0, 111.0, 107.0, 106.0, 107.0, 111.0, 111.0, 109.0, 111.0, 111.0, 109.0, 106.0, 106.0, 104.0, 104.0, 106.0, 107.0, 111.0, 109.0, 106.0, 106.0, 109.0, 107.0, 106.0, 111.0, 115.0, 111.0, 109.0, 113.0, 115.0, 115.0, 109.0, 109.0, 111.0, 111.0, 109.0, 120.0, 115.0, 113.0, 115.0, 116.0, 111.0, 109.0, 113.0, 116.0, 118.0, 106.0, 99.0, 89.0, 97.0, 99.0, 100.0, 107.0, 104.0]

let labels = data.map((el, i) => (Math.round(30 / data.length * i).toString()))

const options = {
  type: "line",
  data: {
    labels,
    datasets: [{
      data,
      label: "Output",
      fill: false,
      pointRadius: 0,
      borderColor: 'orange',
      backgroundColor: 'orange'
    }]
  },
  options: {
    tooltips: {
      intersect: false
    },
    scales: {
      yAxes: [{
        gridLines: {
          display: false
        }
      }],
      xAxes: [{
        ticks: {
          callback: (label, index) => (label % 5 === 0 ? label : '')
        },
        gridLines: {
          display: false
        },
      }]
    }

  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
canvas {
  background-color: #eee;
}
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>

Might want to filter out the duplicates for the labels array and replace them with something not devidebly by 5 to make it a bit better

Leave a comment