如何避免chart.js中的点重叠，这些点的值彼此接近

Question

我正在使用带有积分的chart.js折线图。每当我的数据具有接近的值时，图像就会重叠，因为轴上的时间刻度没有缩放。从名称为title3＆amp;的代码点可以看出title8重叠，完全不可见。有没有任何解决方案或技巧可以避免重叠，以便用户可以看到两个点。请参阅示例Codepen

    var ctx = document.getElementById("myChart").getContext('2d');

var episodicImage = new Image();
    episodicImage.src ='https://image.ibb.co/gLLZ8a/episodic.png';
function newDateString(days) {

            return moment().add(days, 'd').format();
        }
var ManualImage = new Image();
    ManualImage.src ='https://image.ibb.co/fr2p8a/user_successful.png';
var EpisodicfailImage = new Image();
    EpisodicfailImage.src ='https://image.ibb.co/eMGfya/episodic_failed.png';

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
       /*  labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange","Pink"], */
        datasets: [{

           fill: false,

        fillColor: "rgba(220,220,220,0)",
        strokeColor: "rgba(220,180,0,1)",
        pointColor: "rgba(220,180,0,1)",
        showLine: false,
          pointRadius : 20,

           pointStyle: [episodicImage, ManualImage, EpisodicfailImage, ManualImage, episodicImage,ManualImage,ManualImage,ManualImage], 
            data: [
              {x: "2015-01-20T17:07:24+07:30", y: "04:30",name:"Title1"},
              {x: "2015-07-01T17:05:24+05:30", y:"12:00",name:"Title2"},
              {x: "2015-12-31T17:05:24+05:30", y:"07:00",name:"Title3"},
            {x: "2016-05-13T17:05:24+05:30", y:"05:00",name:"Title4"},
            {x: "2016-11-13T17:05:24+05:30", y:"03:00",name:"Title5"},
            {x: "2017-01-10T17:05:24+05:30", y:"12:45",name:"Title6"},
            {x: "2017-09-13T17:05:24+05:30", y:"17:00",name:"Title7"},
             {x: "2015-12-30T17:05:24+05:30", y:"07:15",name:"Title8"},],
            backgroundColor: "#FC940B",
        }]
    },
    options: {
      legend: {
        display: false
    },
        scales: {
           xAxes: [{
                        type: "time",
                        ticks: {
                              minRotation:30,
                              maxTicksLimit: 20// angle in degrees
                              },

                              display: true,
                              scaleLabel: {
                                          display: true,
                                          labelString: 'Date'
                                           }
                    }],
            yAxes: [{
               type: "time",
                display: true,
               beginAtZero: true,
                 time: {
                        format: "HH:mm",
                        unit: 'hour',
                        displayFormats: {
                                        'hour': 'HH:mm', 
                                       }
                        }
            }]
        },
    tooltipTemplate: "<%= name %>",
       zoom: {
            enabled: true,
            mode: 'xy',
            limits: {
                   max: 10,
                    min: 0.5
                     }
              }
    },

});


Chart.defaults.global.tooltipYPadding = 16;
Chart.defaults.global.tooltipCornerRadius = 0;
Chart.defaults.global.tooltipTitleFontStyle = "normal";
Chart.defaults.global.tooltipFillColor = "rgba(10,160,10,0.8)";
document.getElementById("myChart").onclick = function(evt){
            var activePoints = myChart.getElementsAtEvent(evt);
            var firstPoint = activePoints[0];
            var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
            alert("Time "+value.y + " Date " + value.x);
            console.log(value.x);
        };

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://npmcdn.com/Chart.Zoom.js@latest/Chart.Zoom.min.js"></script>
<script src="https://npmcdn.com/chart.js@latest/dist/Chart.bundle.min.js"></script>

<div style="width:90%;">
  <canvas id="myChart"></canvas>
</div>