Chart.js reverse Y axes but keep background fill underneath line

Question

I am trying to plot data using chart.js and want my data to be high to low, so that the top of the Y axes is 0 and the bottom is my highest number.

I've used the reverse option for the axes, but this has meant that my background fill has also inverted. I can't figure out a way to get this to work so that my fill is still underneath the line when the axes is reversed.

 var ctx = document.getElementById("diaryChart").getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                datasets: [{
                    label: 'Position in company',
                    data: [12, 19, 3, 5, 2, 3, 7, 8, 13, 10, 5, 2],
                    backgroundColor: [
                        'rgba(50, 66, 92, 0.3)'
                    ],
                    borderColor: [
                        'rgba(0, 0, 0,1)'
                    ],
                    borderWidth: 3
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        display: false,
                        ticks: {
                            beginAtZero: true,
                            reverse: true,
                            start: 0
                        }
                    }]
                }
            }
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<canvas id="diaryChart" class="diary-chart__chart" width="925" height="161"></canvas>

Answer 1

I was finally able to resolve this issue by adding the option: fill: "start" to the datasets options.

 var ctx = document.getElementById("diaryChart").getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                datasets: [{
                    label: 'Position in company',
                    data: [12, 19, 3, 5, 2, 3, 7, 8, 13, 10, 5, 2],
                    backgroundColor: [
                        'rgba(50, 66, 92, 0.3)'
                    ],
                    borderColor: [
                        'rgba(0, 0, 0,1)'
                    ],
                    borderWidth: 3,
                    fill: "start"
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        display: false,
                        ticks: {
                            beginAtZero: true,
                            reverse: true,
                            start: 0
                        }
                    }]
                }
            }
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<canvas id="diaryChart" class="diary-chart__chart" width="925" height="161"></canvas>