Broken apexcharts legend (vue-apexcharts)

i just create simple piechart with vue-apexchart. expected process what I want is,

set default config chart
mutate the component then re-config the chart based on props
render it

i was success this scenario works, but idk what happens with my pie chart. this is my pie chart

the legend successfully showed, but the legend position is bedhind of pie. i am trying to add offsetY in chart options and legend options. it's still not working.

am i miss something ?

this is my code

<script>
import VueApexCharts from 'vue-apexcharts'

export default {
  components: {
    'apexchart': VueApexCharts,
  },
  props: {
    name: {default: "Durasi Parkir"},
    value: {default: () => ({})},
    height: {default: "320"},
    dir: {default: "ltr"},
    is_showed_legend: {default: true},
    is_floating_legend: {default: true},
    legend_position: {default: "top"},
    legend_vertical_align: {default: "center"},
    legend_horizontal_align: {default: "center"},
    legend_font_size: {default: "14px"},
    legend_x_offset: {default: 0},
    legend_y_offset: {default: 0},
    responsive_breakpoints: {default: 600},
    responsive_chart_height: {default: 240},
    is_responsive_show_legend: {default: false},
    additional_class: {default: ""}
  },
  data: () => ({
    series: [],
    options: {
      labels: [],
      colors: [],
      chart: {
        offsetY: 0, // iam trying to add offset but its still not works
      },
      legend: {
        show: true,
        position: "bottom",
        horizontalAlign: 'center',
        verticalAlign: 'middle',
        floating: false,
        fontSize: "14px",
        offsetX: 0,
        offsetY: 10,
      },
      responsive: [{
        breakpoint: 0,
        options: {
          chart: {
            height: 0
          },
          legend: {
            show: false
          },
        }
      }]
    }
  }),
  created() {
    this.processThemingChart()
  },
  methods: {
    formatChartColor(index = 0) {
      let array_colors = [this.$utility.getPrimaryColor(), "#b6b6b6", "#5fa2f4", "#5abf78",
        "#6983aa", "#e97171", "#ede682", "#ba7967", "#f1c5c5", "#f69e7b"]
      if (index) return array_colors[index]
      else return array_colors
    },

    processFillChartColor() {
      this.options.colors = this.formatChartColor()
    },

    processFillChartOption() {
      this.options.legend.position = this.legend_position
      this.options.legend.fontSize = this.legend_font_size
      this.options.legend.show = this.is_showed_legend
      this.options.legend.floating = this.is_floating_legend
      this.options.responsive[0].breakpoint = this.responsive_breakpoints
      this.options.responsive[0].options.chart.height = this.responsive_chart_height
      this.options.responsive[0].options.legend.show = this.is_responsive_show_legend
      this.options.legend.horizontalAlign = this.legend_horizontal_align
      this.options.legend.verticalAlign = this.legend_vertical_align
      this.options.legend.offsetY = this.legend_y_offset
      this.options.legend.offsetX = this.legend_x_offset
    },

    processThemingChart() {
      this.processFillChartColor()
      this.processFillChartOption()
      this.processDataChart()
    },

    processDataChart() {
      this.series = []
      this.options.labels = []
      this.value.forEach(item => {
        this.series.push(item.value)
        this.options.labels.push(item.text)
      })
    },

    processFillChart() {
      try {
        (this.value !== '') ? this.processDataChart() : ''
      } catch (e) {
        this.$sentry.captureException(e, `user gagal merender grafik ${this.name}`)
      }
    },
  }
}
</script>
<template>
  <apexchart :class="`apex-charts ${additional_class}`" :height="height" type="pie" :dir="dir"
             :series="series" :options="options" 
  ></apexchart>
</template>

Broken apexcharts legend (vue-apexcharts)

0 Answers