min-max.html 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Min/Max Settings</title>
  5. <script src="../../../dist/Chart.bundle.js"></script>
  6. <script src="../../utils.js"></script>
  7. <style>
  8. canvas{
  9. -moz-user-select: none;
  10. -webkit-user-select: none;
  11. -ms-user-select: none;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <div style="width:75%;">
  17. <canvas id="canvas"></canvas>
  18. </div>
  19. <script>
  20. var config = {
  21. type: 'line',
  22. data: {
  23. labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  24. datasets: [{
  25. label: 'My First dataset',
  26. backgroundColor: window.chartColors.red,
  27. borderColor: window.chartColors.red,
  28. data: [10, 30, 50, 20, 25, 44, -10],
  29. fill: false,
  30. }, {
  31. label: 'My Second dataset',
  32. fill: false,
  33. backgroundColor: window.chartColors.blue,
  34. borderColor: window.chartColors.blue,
  35. data: [100, 33, 22, 19, 11, 49, 30],
  36. }]
  37. },
  38. options: {
  39. responsive: true,
  40. title: {
  41. display: true,
  42. text: 'Min and Max Settings'
  43. },
  44. scales: {
  45. yAxes: [{
  46. ticks: {
  47. min: 10,
  48. max: 50
  49. }
  50. }]
  51. }
  52. }
  53. };
  54. window.onload = function() {
  55. var ctx = document.getElementById('canvas').getContext('2d');
  56. window.myLine = new Chart(ctx, config);
  57. };
  58. </script>
  59. </body>
  60. </html>