Создание закругленных углов в линейной диаграмме [vue-chart.js]

Question

Я отображаю линейную диаграмму. Как сделать так, чтобы у нее был радиус нижней границы? У меня есть Линейная Диаграмма внутри Карты, и у Карты есть border-radius из 6px нет padding-bottom, поэтому линейный график придерживается снизу, и я хочу, чтобы Диаграмма имела border-radius из 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)
    }
  }

Answer 1

Просто установите overflow: hidden; в классе вашей карты. Или вы можете нацелиться на визуализированный холст диаграммы и задать для него радиус границы, например .card #line-chart { border-radius: 6px; }

Примеры: https://codepen.io/mix3d/pen/JjoRKGa