apexcharts / apexcharts.js

📊 Interactive JavaScript Charts built on SVG
https://apexcharts.com
MIT License
14.05k stars 1.28k forks source link

Mixed Chart Multiple yaxis with negative value behaviour #4442

Closed fctdev2024 closed 2 months ago

fctdev2024 commented 2 months ago

I am trying to make a mixed chart with 2 lines and 1 bar chart with multiple yaxis. I want the bar chart to have the negative value behavior starting from the middle using the second yaxis (0%). Still no luck. How the yaxis min and max function works? Any clue?

Screenshot 2024-04-29 15 52 47


  series: [{
      name: "test1",
      data: [100000, 105000, 107000, 101650, 97650]
    },
    {
      name: "test2",
      type: 'bar',
      data: [100000, 104000, 107500, 101650, 97650]
    },
    {
      name: 'test3',
      data: [95000, 99750, 101650, 99750, 97650]
    }
  ],
  chartOptions: {
    chart: {
      height: 672,
      type: 'line',
      zoom: {
        enabled: false
      },
    },
    dataLabels: {
      enabled: false
    },
    stroke: {
      width: [5, 0, 5],
      curve: 'smooth',
      dashArray: [0, 0, 5]
    },
    xaxis: {
        categories: ['01 Jan', '02 Jan', '03 Jan', '04 Jan', '05 Jan'
        ],
        tickPlacement: 'between',
    },
    yaxis: [
        {
        seriesName: ['test1', 'test2'],
          min: 85000,
          max: 115000,
          tickAmount: 6,
          labels:{
              formatter: (value) => {
                return '$' + numberWithCommas(value);
              },
            }
        },
        {
            seriesName: 'test3',
            min: 85000 || function(min){return (min - 100000) / 10000},
          max: 115000 || function(max){return (max - 100000) / 10000},                          
          tickAmount: 6,
          show: true,
          opposite: true,
          labels:{
              formatter: (value) => {
                return (value - 100000) / 10000 + '%';
              },
            }
        }
    ],
    colors: ['#546E7A', '#4CAF50', '#FF0000'],
    fill: {
        opacity: [1, 0.2, 1]
    },
    grid: {
      borderColor: '#f1f1f1',  
    },
  },
}````
brianlagunas commented 2 months ago

Please do not post questions as feature request and also do not double post. You posted this same question in discussions.

fctdev2024 commented 2 months ago

any answer?

fctdev2024 commented 2 months ago

No answer in discussion and got closed abruptly also in this thread. No good developer in this repo? Only hostile people here?