Chartjs-How to decrease bottom width of triangle using line chart in chartJs?

by

1👍

You can define the xAxis as a time caresian axis, get rid of data.labels and rather specify individual data points as objects with an x and y property.

Please note that Chart.js uses Moment.js for the functionality of the time axis. Therefore you should use the bundled version of Chart.js that includes Moment.js in a single file.

new Chart('canvas', {
  type: 'line',
  data: {
    datasets: [{
      label: 'My Dataset',
      data: [
        { x: '01-01', y: 0 },
        { x: '02-26', y: 0 },
        { x: '03-01', y: 40 },
        { x: '03-05', y: 0 },
        { x: '05-28', y: 0 },
        { x: '06-01', y: 50 },
        { x: '06-05', y: 0 },
        { x: '08-01', y: 0 }
      ],
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgb(255, 99, 132)',    
      lineTension: 0
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',        
        time: {
          parser: 'MM-DD',
          unit: 'month',
          displayFormats: {
             month: 'MMM'
          },
          tooltipFormat: 'MMM DD'
        }
      }]
    }     
  }
});
canvas {
  max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="canvas" width="8" height="4"></canvas>

Leave a comment