How to change Bar apexchart label

user_14085501 0
Viewed 985

I can't change Barchart label using of API data, here I have updated the series succesfully using

this.$refs.chart.updateSeries([{
          name: this.$t('totalGain'),
          data: this.obj.sortedvalues
}])

but I have tried everything for updating chart labels but Nothing works.

my code:

HTML:

<apexchart type="bar" ref="chart" :options="options" :series="series"></apexchart>

Script:

data: function () {
    return {
options: {
        stroke: {
          width: 7,
          curve: 'smooth'
        },
        chart: {
          type: 'bar',
          id: 'vuechart',
          height: 'auto',
          dropShadow: {
            enabled: true,
            enabledOnSeries: undefined,
            top: 0,
            left: 0,
            blur: 3,
            color: '#000',
            opacity: 0.35
          },
          colors: ['#F44336', '#E91E63', '#9C27B0'],
          plotOptions: {
            bar: {
              columnWidth: '45%',
              distributed: true
            }
        },
        dataLabels: {
          enabled: true
        },
        xaxis: {
          categories: [1, 2, 3]
        },
        title: {
          text: '',
          align: 'left',
          margin: 10,
          offsetX: 0,
          offsetY: 0,
          floating: false,
          style: {
            fontSize: '14px',
            fontWeight: 'bold',
            fontFamily: undefined,
            color: '#263238'
          }
        }
      },
      series: [{
        name: 'series-1',
        data: [15, 5, 7, 0, 8]
      }]
    }

Update Chart:

this.$refs.chart.updateSeries([{
          name: this.$t('totalGain'),
          data: this.obj.sortedvalues
}])
// here I need to change labels

I have tried acess directly to categories and patch option using updateOptions but didn't works!

apexcharts vue.js
2 Answers

I dont know In VUEjs But here is logic applied on reactjs

You need to pass key which hold the state variable counter in Chart component and You need to update chart series using state. Now and setting of state you need to update counter in key . Once your counter gets changed your whole component gets reRander and your label will gets updated.

user_81768430

To update both the series and the labels, you would simply provide the series and the labels together as an object and pass it to the chart's updateOptions method.

var updated_job_cat_chart_options = {
    series: job_categories_series,
    labels: job_categories_labels
};


myChart.updateOptions(updated_job_cat_chart_options);

NB: The job_categories_series is an array containing the series to be updated with and the job_categories_labels contains the labels.

user_78802010
Related