echarts stacked bar chart with time xaxis

pguardiario 0
Viewed 14

Can someone check my chart options and suggest a way to make the time xaxis behave correctly? I've tried with timestamps, dates, timestamps / 1000 and nothing looks right

let sales = [
    0,84,5,3,2,1,0,0,3,6
]

let listings = [
    1,297,23,5,8,6,9,3,6,19
]

let ps = [
    1663084060653,
    1663089644329,
    1663095228005,
    1663100811680,
    1663106395356,
    1663111979032,
    1663117562708,
    1663123146384,
    1663128730059,
    1663134313735
]

let color = "red"

option = {
    textStyle: {
      color
    },
    legend: {
      textStyle: {
        color
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'time',
        data: ps,
        // axisLabel: {
        //   formatter: ts => new Date(ts).toTimeString().replace(/ .*/, '')
        // }
      }
    ],
    yAxis: [
      {
        // type: 'value'
      }
    ],
    series: [
      {
        name: 'Sales',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        data: sales
      },
      {
        name: "Listings",
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        data: listings
      }
    ]
  }
echarts
1 Answers

Your series (listings & sales here) have to have a [date, value] format. Also, you'll have to remove data from xAxis as it will automatically follow the dates that are given in the series.

So, in your example :

//convert listings & sales to a list of [date, value]
listings = listings.map((value, index) => {
  return [ps[index], value]
})
sales = sales.map((value, index) => {
  return [ps[index], value]
})

xAxis: [
  {
    type: 'time',
    //data: ps, <--- remove this line
  }
],
A mere dev0
Related