Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

208
Views
Apache ECharts Stacked Horizontal Bar doesn't work as it should

Apache ECharts 5.3.0

I want to do like this https://imgur.com/a/ljTntLy (code paste in https://echarts.apache.org/examples/en/editor.html?c=bar-y-category-stack)

option = {
  tooltip: {
    trigger: 'item',
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['wn', 'req', 'quest']
  },
  series: [
    {
  
      type: 'bar',
      stack: 'stackbar',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [{name: 'wn-1', value: 42}, 0, 0]
    },
    {
      type: 'bar',
      stack: 'stackbar',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
       data: [{name: 'wn--registr', value: 11}, 0, 0]
    },
    {
  
      type: 'bar',
      stack: 'stackbar',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [0, {name: 'req-sn-1', value: 38}, 0]
    },
    {
      type: 'bar',
      stack: 'stackbar',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
       data: [0, {name: 'req-sn-become', value: 7}, 0]
    },
    {
      type: 'bar',
      stack: 'stackbar',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
       data: [0, 0, {name: 'quest', value: 20}]
    },
    {
      type: 'bar',
      stack: 'stackbar',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
       data: [0, 0, {name: 'quest-2', value: 9}]
    },
    {
      type: 'bar',
      stack: 'stackbar',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
       data: [0, 0, {name: 'quest-3', value: 13}]
    }
  ]
}

My solution is not very reliable, since I replace the data that is not needed for display with zeros (Number 0)

I need a way how can I refer the data I need to a specific yAxis column, I am using Apache Echarts along with React, but I think the solution will be universal

Please, help

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!