Chart.js #6334

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<canvas id="chart"></canvas>

JavaScript

new Chart(document.getElementById('chart'), {
    type: 'line',
    data: {
        datasets: [{
        	data: [{x:-400,y:-600},{x:800,y:600}],
          borderColor: '#070',
          borderWidth: 2,
          datalabels: {
            display: false
          }
        }, {
        	data: [{x:-400,y:0},{x:-200,y:0},{x:0,y:0},{x:200,y:0},{x:400,y:0},{x:600,y:0}],
          datalabels: {
          	align: function(context) {
              return context.dataset.data[context.dataIndex].x === 0 ? 135 : 90;
            },
            formatter: function(value) {
              return value.x;
            }
          }
        }, {
        	data: [{x:0,y:-400},{x:0,y:-200},{x:0,y:0},{x:0,y:200},{x:0,y:400}],
          datalabels: {
          	align: 180,
            formatter: function(value) {
              return value.y !== 0 ? value.y: '';
            }
          }
        }]
    },
    options: {
      aspectRatio: 1.5,
      legend: {
        display: false
      },
      elements: {
        line: {
          borderWidth: 0,
          fill: false
        },
        point: {
          radius: 0
        }
      },
      scales: {
        yAxes: [{
          ticks: {
            display: false,
            min: -400,
            max: 400
          }
        }],
        xAxes: [{
          type: 'linear',
          ticks: {
            display: false,
            min: -400,
            max: 600
          },
        }]
      },
      plugins: {
				datalabels: {
          
        }
      }
    }
});