Home > Net >  Vue Apexchart not showing negative value
Vue Apexchart not showing negative value

Time:01-03

i want to show the negative value in the chart, but its not showing, i tried so many configs but nothing is happening.

Codesandbox link

these are the true values.

the component:

<apexcharts
  ref="barchart"
  width="500"
  height="350"
  type="bar"
  :options="chartOptions"
  :series="series"
></apexcharts>

Options:

chartOptions: {
        colors: ["#00E676", "#9155FD", "#8A8D93"],
        dataLabels: {
          enabled: false,
        },

        xaxis: {
          categories: ["Janeiro", "Feb", "Mar"],
        },
  },  

Series:

  series: [
    {
      name: "Receita",
      data: [241221.4, 277855.4],
    },
    {
      name: "Sub",
      data: [15957.8, 18169.15],
    },
    {
      name: "Rat",
      data: [-776.525, -322.625],
    },
  ],

CodePudding user response:

To show negative values in the ApexCharts chart, the min option in the yaxis configuration is set to a value less than 0. So with the xaxis, add this code:

yaxis: {
    min: -100
},

CodePudding user response:

I add these options in my chart and solved my problem to show the values:

legend: {
          position: "right",
          width: 128,
        },

 tooltip: {
          shared: true,
        },
  • Related