我想使用chart.js更改折线图的外观

Question

这是我所需的图表

我希望图表看起来像这样

我想在最后一点显示我的最后一个数据发送值，并在画布中编辑其位置。我该如何实现？

我能够增加图表js中最后一个数据点的大小

到目前为止我做了什么

var config = {
    type: 'line',
    data: {
              datasets: [{
                label: 'Temperature',
                backgroundColor: window.chartColors.green,
                borderColor: window.chartColors.green,
                data: DataFormate,
                pointRadius: RadiusSize,
                pointHitRadius: RadiusSize,
                pointHoverBorderWidth: RadiusSize,
                fill: false,
              }]
             },
            options: {
                responsive: true,
                title: {
                    display: false,
                    text: 'Temperature'
                },
                tooltips: {
                    mode: 'index',
                    intersect: true,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                legend: {
                    display: false
                },
                scales: {
                    xAxes: [{
                        type: 'time',
                        distribution: 'linear',
                        display: true,
                        scaleLabel: {
                            display: false,
                            labelString: 'Day'
                        },
                        time: {
                            unit: 'hour',
                            min: fromTime,
                            max: currentDate,
                            minUnit: 2,
                            stepSize: 2,                            
                            displayFormats: {
                                quarter: 'h:mm:ss a'
                            }
                        }

                    }],
                    yAxes: [{
                            display: true,
                            ticks: {
                                steps: 5,
                                stepValue: 5,
                                max: 40,
                                min: 10
                            }
                     }]
                }
        }
};
function drawGraph(lastValue){
    var ctx = document.getElementById('canvas').getContext('2d');
    var chartObject = new Chart(ctx, config);

    if(lastValue>=maxLimit){
        chartObject.data.datasets[0].backgroundColor = window.chartColors.red;
        chartObject.data.datasets[0].borderColor = window.chartColors.red;
        chartObject.update();
    }else if(lastValue<=minLimit){
        chartObject.data.datasets[0].backgroundColor = window.chartColors.blue;
        chartObject.data.datasets[0].borderColor = window.chartColors.blue;
        chartObject.update();
    }

}