Javascript 在折线图[vue Chart.js]中创建圆角

我渲染一个折线图，如何使其具有底部边界半径？我在一张卡片里有一张折线图，卡片的

边框半径
为
6px
无
填充底部
，所以折线图贴在底部，我希望图表的
边框半径
为
6px
，我该怎么做

import { Line, mixins } from 'vue-chartjs'
  const { reactiveProp } = mixins

  export default {
    extends: Line,
    mixins: [reactiveProp],
    data: () => ({
      options: {
        layout: {
          padding: {
            bottom: -20,
            left: -20,
          }
        },
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true,
              min: 0,
              display: false,
            },
            gridLines: {
              drawBorder: false,
              showBorder: false,
              display: false,
            },
          }],
          xAxes: [{
            gridLines: {
              drawBorder: false,
              showBorder: false,
              display: false,
            },
            ticks: {
              display: false
            }
          }]
        }
      }
    }),
    mounted () {
      // this.chartData is created in the mixin.
      // If you want to pass options please create a local options object.
      this.renderChart(this.chartData, this.options)
    }
  }

刚刚设置
溢出：隐藏在您的卡类上。
或者，您可以将渲染的图表画布本身作为目标，并在其上设置边框半径，如
.card#linechart{border radius:6px；}

示例：
您有可以共享的工作示例/jsfiddle吗？