Dynamic yaxis max value

[bee-interactive]

Hi!

In my chart, I have some data that represents sales during a given time. I put the labels on top of each bar. But, for the max value, it is cutted off and doesn't show the label.

Here, my max value is 5 and the label for the corresponding bar is outside. Is it possible to add dynamically +1 to the max value?

I have tried with several tests but none have worked out yet.

Thanks for your help!

[junedchhipa]

Try this

var max = 0;
var data = [4, 3, 5, 2];

data.map(d => {
  max = Math.max(max, d)
})

options: {
  yaxis: {
    max: max + 1
  }
}

[bee-interactive]

@junedchhipa I'v managed to add my +1 to the maximum value after my axios request. But now I'm struggling to apply it to my max yaxis value. I've tried with the computed data but without success..

After my axios request, I do this:

    this.max = Math.max(...response.data.totals) + 1

This sets the "max" value to 6 in my case.

In my computed properties, I try this:

        computed: {
            series: function() {
                return [{
                    name: 'Ventes',
                    data: this.count
                }]
            },
            max: function() {
                return options.yaxis.max = this.max
            }
        },

I've based my approach on the other computed properties above.

[junedchhipa]

When you update the options, update the whole object instead of updating nested property.

options = {
  yaxis: {}
}

[bee-interactive]

@junedchhipa But I got a whole other stuffs in my options object.. I've tried to put all of it in the computed part but then I got this "object expected but array given" error..

[junedchhipa]

The spread operator will help to update nested property.

this.chartOptions = {...this.chartOptions, ...{
    yaxis: {
        max: max
    }
}};

[bee-interactive]

@junedchhipa But where do I put this?

[junedchhipa]

You may put in computed or call a function in mounted()

[bee-interactive]

@junedchhipa I cannot make it work. Nothing that I do changes the value.. Is it not easier to have something like a formatter? For the dataLabels, there's something like this:

                dataLabels: {
                    enabled: true,
                    formatter: function (val) {
                        return val + " sales"; // Here you would have val + 1 for the yaxis max value
                    }
                }

[junedchhipa]

I will test if changing yaxis max value works or not. This was an issue faced by a couple of users, so let me look into it.

[junedchhipa]

Here is a working example of changing yaxis.max dynamically in Vue.js
Edit on Codesandbox

<div class="example">
    <apexcharts
      width="500"
      height="350"
      type="bar"
      :options="chartOptions"
      :series="series"
    ></apexcharts>
</div>

export default {
  name: "Chart",
  data: function() {
    return {
      series: [
        {
          data: [3, 5, 10, 15, 20, 30, 45]
        }
      ]
    };
  },
  computed: {
    chartOptions: function() {
      return {
        yaxis: {
          max: Math.max(...this.series[0].data) + 10
        }
      };
    }
  }
};

[bee-interactive]

@junedchhipa The problem with my code is that I have other properties for the "options" value. I've updated the code here to fetch exactly my situation: https://codesandbox.io/s/my53x17n9

As you can see, I get this error: The computed property "options" is already defined in data.

[junedchhipa]

Updated your example - https://codesandbox.io/s/2p2x0zwpqn

It is not valid to have the same prop in data and computed. So, I moved the whole options object to computed.

[bee-interactive]

Yes It worked! Gosh that was long. Thank you so much!

[ujju3073]

On button click..I want to get xaxis node.

I am using this but not able to get xaxis value.
click: function(event, chartContext, config) { }