Created
March 2, 2019 18:16
-
-
Save benmccann/0b69f3edc08e259cc4abe4ddd7479ffb to your computer and use it in GitHub Desktop.
Reproduces ticksLength issue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Line Chart</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> | |
| <script src="../../../dist/Chart.js"></script> | |
| <script src="../../utils.js"></script> | |
| <style> | |
| canvas { | |
| -moz-user-select: none; | |
| -webkit-user-select: none; | |
| -ms-user-select: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div style="width:1000px"> | |
| <canvas id="chart1"></canvas> | |
| </div> | |
| <br> | |
| <br> | |
| Chart Type: | |
| <select id="type"> | |
| <option value="line">Line</option> | |
| <option value="bar">Bar</option> | |
| </select> | |
| <button id="update">update</button> | |
| <script> | |
| function randomNumber(min, max) { | |
| return Math.random() * (max - min) + min; | |
| } | |
| function randomBar(date, lastClose) { | |
| var open = randomNumber(lastClose * 0.95, lastClose * 1.05); | |
| var close = randomNumber(open * 0.95, open * 1.05); | |
| return { | |
| t: date.valueOf(), | |
| y: close | |
| }; | |
| } | |
| var dateFormat = 'MMMM DD YYYY'; | |
| var date = moment('April 01 2017', dateFormat); | |
| var data = [randomBar(date, 30)]; | |
| var labels = [date]; | |
| while (data.length < 60) { | |
| date = date.clone().add(1, 'd'); | |
| if (date.isoWeekday() <= 5) { | |
| data.push(randomBar(date, data[data.length - 1].y)); | |
| labels.push(date); | |
| } | |
| } | |
| var ctx = document.getElementById('chart1').getContext('2d'); | |
| ctx.canvas.width = 1000; | |
| ctx.canvas.height = 300; | |
| var color = Chart.helpers.color; | |
| var cfg = { | |
| type: 'bar', | |
| data: { | |
| labels: labels, | |
| datasets: [{ | |
| label: 'CHRT - Chart.js Corporation', | |
| backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(), | |
| borderColor: window.chartColors.red, | |
| data: data, | |
| type: 'line', | |
| pointRadius: 0, | |
| fill: false, | |
| lineTension: 0, | |
| borderWidth: 2 | |
| }] | |
| }, | |
| options: { | |
| scales: { | |
| xAxes: [{ | |
| type: 'time', | |
| distribution: 'series', | |
| ticks: { | |
| source: 'data', | |
| display: false, // Setting this option changes ticksLength from 1109 to NaN | |
| autoSkip: true | |
| } | |
| }], | |
| yAxes: [{ | |
| scaleLabel: { | |
| display: true, | |
| labelString: 'Closing price ($)', | |
| }, | |
| ticks: { | |
| autoSkip: false | |
| } | |
| }] | |
| } | |
| } | |
| }; | |
| var chart = new Chart(ctx, cfg); | |
| document.getElementById('update').addEventListener('click', function() { | |
| var type = document.getElementById('type').value; | |
| chart.config.data.datasets[0].type = type; | |
| chart.update(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment