A Pen by jordanwillis on CodePen.
Created
August 6, 2019 08:33
-
-
Save BoniWPy/f391047150dcc2913a2e191ba5a6ad8f to your computer and use it in GitHub Desktop.
Chart.js - Chart Tick Distance Examples
This file contains hidden or 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
| <div id="chartContainer"> | |
| <canvas id="myChart"></canvas> | |
| </div> | |
| <br/><br/><br/> | |
| <div style="width: 40%"> | |
| <canvas id="myChart2"></canvas> | |
| </div> | |
| <br/><br/><br/> | |
| <div style="width: 30%; height: 400px"> | |
| <canvas id="myChart3" style="width: 40%"></canvas> | |
| </div> |
This file contains hidden or 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
| var chartColors = { | |
| red: 'rgb(255, 99, 132)', | |
| orange: 'rgb(255, 159, 64)', | |
| yellow: 'rgb(255, 205, 86)', | |
| green: 'rgb(75, 192, 192)', | |
| blue: 'rgb(54, 162, 235)', | |
| purple: 'rgb(153, 102, 255)', | |
| grey: 'rgb(231,233,237)' | |
| }; | |
| var randomScalingFactor = function() { | |
| return (Math.random() > 0.5 ? 1.0 : 1.0) * Math.round(Math.random() * 100); | |
| }; | |
| var data = { | |
| labels: ["Car", "Bike", "Walking"], | |
| datasets: [{ | |
| label: 'Fuel', | |
| backgroundColor: [ | |
| chartColors.red, | |
| chartColors.blue, | |
| chartColors.yellow], | |
| data: [ | |
| randomScalingFactor(), | |
| randomScalingFactor(), | |
| randomScalingFactor(), | |
| ] | |
| }] | |
| }; | |
| var myBar = new Chart(document.getElementById("myChart"), { | |
| type: 'horizontalBar', | |
| data: data, | |
| options: { | |
| responsive: true, | |
| title: { | |
| display: true, | |
| text: "Chart.js - Base Example" | |
| }, | |
| tooltips: { | |
| mode: 'index', | |
| intersect: false | |
| }, | |
| legend: { | |
| display: false, | |
| }, | |
| scales: { | |
| xAxes: [{ | |
| ticks: { | |
| beginAtZero: true | |
| } | |
| }] | |
| } | |
| } | |
| }); | |
| var myBar2 = new Chart(document.getElementById("myChart2"), { | |
| type: 'horizontalBar', | |
| data: data, | |
| options: { | |
| responsive: true, | |
| title: { | |
| display: true, | |
| text: "Chart.js - Changing X Axis Step Size" | |
| }, | |
| tooltips: { | |
| mode: 'index', | |
| intersect: false | |
| }, | |
| legend: { | |
| display: false, | |
| }, | |
| scales: { | |
| xAxes: [{ | |
| ticks: { | |
| beginAtZero: true, | |
| stepSize: 2 | |
| } | |
| }] | |
| } | |
| } | |
| }); | |
| var myBar3 = new Chart(document.getElementById("myChart3"), { | |
| type: 'horizontalBar', | |
| data: data, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| title: { | |
| display: true, | |
| text: "Chart.js - Setting maintainAspectRatio = false and Setting Parent Width/Height" | |
| }, | |
| tooltips: { | |
| mode: 'index', | |
| intersect: false | |
| }, | |
| legend: { | |
| display: false, | |
| }, | |
| scales: { | |
| xAxes: [{ | |
| ticks: { | |
| beginAtZero: true | |
| } | |
| }] | |
| } | |
| } | |
| }); |
This file contains hidden or 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
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> |
This file contains hidden or 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
| #chartContainer { | |
| width: 40% | |
| }; | |
| #myChart2 { | |
| width: 40% | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment