Chart.js add border around line chart, and yAxis unit title ([s])

Question

I have problem with chartJS. I cannot add border around chart, yAxis unit title, and yAxis labelString with element. I'm using react with typescript. I can add only string to labelString. You can see what I want do do on screen and on another screen you can see what I actualy have.

Is there any options in chart.js@2.7.1 to add these elements?

First image is my goal. Second is actual. @edit This is my chartOptions file. I just pass arguments in function to get these options.

import * as Chart from 'chart.js';

const getOptions = (
    beginAtZero: boolean,
    tickMax: number,
    tickStepValue: number,
    titleText: string,
    xAxesLabelString: string,
    yAxesLabelString: string,

): Chart.ChartOptions => {
    const ticks: Chart.LinearTickOptions =  {
        beginAtZero,
        fontColor: '#3C3750',
        fontFamily: 'Muli',
        fontSize: 10,
        fontStyle: 'bold',
        max: tickMax,
        stepSize: tickStepValue,
    };
    const options: Chart.ChartOptions = {
        legend: {
            display: false,
        },
        maintainAspectRatio: false,
        responsive: true,
        scales: {
            xAxes: [{
                display: true,
                gridLines: {
                    display: false,
                },
                scaleLabel: {
                    display: true,
                    fontColor: '#3C3750',
                    fontFamily: 'Muli',
                    fontSize: 10,
                    fontStyle: 'bold',
                    labelString: xAxesLabelString,
                },
                ticks,
            }],
            yAxes: [{
                display: true,
                gridLines: {
                    drawBorder: true,
                    tickMarkLength: 15,
                },
                scaleLabel: {
                    display: true,
                    fontColor: '#3C3750',
                    fontFamily: 'Muli',
                    fontSize: 10,
                    fontStyle: 'bold',
                    labelString: yAxesLabelString,
                },
                ticks,
            }],
        },
        title: {
            display: true,
            text: titleText,
        },
        tooltips: {
            backgroundColor: '#E4677B',
            callbacks: {
                label: (tooltipItem, data) => {
                    return 'Time: ' + data.datasets[0].data[tooltipItem.index];
                },
                title: (tooltipItem, data) => {
                    return '';
                },
            },
            custom: (tooltip) => {
                if (!tooltip) {
                    return;
                }
                // disable displaying the color box;
                tooltip.displayColors = false;
              },
        },
    };

    return {
        ...options,
    };
};

export default getOptions;

public createChart({room, roomState, chartOptions, chartDataset, chartLabels}: ILineChartProps) {
        const ctx = this.canvas.getContext('2d');

        this.myChart = new Chart(ctx, {
            data: {
                datasets: chartDataset,
                labels: chartLabels,
            },
            options: chartOptions,
            type: 'line',
        });
    }

Answer 1

This is what worked for me.

scales: {
          xAxes: [
            {
             /* Your xAxes options here */
            },
            {
              position: 'top',
              ticks: {
                display: false
              },
              gridLines: {
                display: true,
                drawOnChartArea: false,
                drawTicks: false
              }
            }
          ],
          yAxes: [
            {
            /* Your yAxes options here */
            },
            {
              position: 'right',
              ticks: {
                display: false
              },
              gridLines: {
                display: true,
                drawOnChartArea: false,
                drawTicks: false
              }
            }
          ]
        }

Answer 2

Adding one xAxes on top and one yAxes on right both showing nothing will do the job.

scales: {
        xAxes: [{
            /* Your xAxes options here */
        }, {
            position: 'top',
            ticks: {
                display: false
            },
            gridLines: {
                display: false,
                drawTicks: false
            }
        }],
        yAxes: [{
            /* Your yAxes options here */
        }, {
            position: 'right',
            ticks: {
                display: false
            },
            gridLines: {
                display: false,
                drawTicks: false
            }
        }]
    }