Chart.js x-axis values settings - Javascript Chart.js

Javascript examples for Chart.js:Axis

  1. HOME
  2. Javascript
  3. Chart.js
  4. Axis

Description

Chart.js x-axis values settings

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Chart js line example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from   www  . j  a va 2  s  . co m
function newDate(days) {
    return moment().add(days, 'd').format('MM/DD');
}
var painChartContext = document.getElementById('pain_chart');
    var painChart = new Chart(painChartContext, {
        type: 'line',
        data: {
            labels: [newDate(-7), newDate(-6), newDate(-5), newDate(-4), newDate(-3), newDate(-2), newDate(-1)],
            datasets: [{
                label: "Pain",
                data: [8, 9, 7, 3, 10, 3, 4],
                fill: false,
                borderColor: '#b71705',
                spanGaps: true
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    type: 'time',
                    time: {
                        unit: 'day',
                        displayFormats: {
                            'millisecond': 'MM/DD',
                            'second': 'MM/DD',
                            'minute': 'MM/DD',
                            'hour': 'MM/DD',
                            'day': 'MM/DD',
                            'week': 'MM/DD',
                            'month': 'MM/DD',
                            'quarter': 'MM/DD',
                            'year': 'MM/DD',
                        },
                        min: '04/13',
                        max: '04/19'
                    }
                }],
            },
        }
    });
    }

      </script> 
   </head> 
   <body> 
      <div style="width:75%;"> 
         <canvas id="pain_chart"></canvas> 
      </div>  
   </body>
</html>

Related Tutorials