🐞 lineCap has no effect

[apertureless]

Hey there!

I've tried to create a line-chart with the vue-apexcharts.
However I guess the issue is related to the core.

It seems that the stroke.lineCap option has no effect.
According to the docs the lineCap should have three options: butt, square and round however neither of those is changing the line chart. I am aiming for the round option but the ends of the stroke are not rounded at all.

Changing the option to butt or square also seems to have no effect.

Example

<template>
  <chart
    :options="options"
    :series="series"
    type="line"
    width="550"
  />
</template>

<script>
import VueApexCharts from 'vue-apexcharts'

export default {
  name: 'LineChart',
  components: {
    chart: VueApexCharts
  },
  props: {
    colors: {
      type: Array,
      default: () => (['#0064AD', '#00925B'])
    }
  },
  data: () => ({
    options: {
      chart: {
        id: 'line-chart',
        toolbar: {
          show: false
        }
      },
      stroke: {
        show: true,
        curve: 'smooth',
        lineCap: 'round',
        width: 4
      },
      colors: [],
      xaxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
      },
      yaxis: {
        min: 0
      },
      markers: {
        size: 0
      }
    },
    series: [{
      name: 'Anzahl Arten',
      data: [20, 50, 10, 80, 100]
    }, {
      name: 'Anzahl Nachweise',
      data: [10, 10, 5, 40, 20]
    }]

  }),
  created () {
    this.options.colors = this.colors
  }
}
</script>

[junedchhipa]

Hey Jakub,
I confirm this doesn't work as expected. Had a quick look at the code, and I have hard-coded "butt" option in the drawPath method.

Thanks for reporting, will be fixed soon

[junedchhipa]

Fixed in a10dbf6

[apertureless]

Awesome, thanks! 🙏

[vsb-marcus]

@junedchhipa the same is happening for angular-apexcharts but in radialbar chart