apexcharts / apexcharts.js

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

Designs overlap with stacked bar #2811

Open rnrnstar2 opened 2 years ago

rnrnstar2 commented 2 years ago

Description

When I create a series as shown in the link below, I get an error in the display.

https://apexcharts.com/docs/series/ 3.2) Date strings

Screenshots

スクリーンショット 2021-12-03 12 46 35

my code

const [series, setSeries] = useState<{ name: string; data: { x: string; y: number }[] }[]>();

title: {
  text: '予約データ',
},
chart: {
  locales: [ja],
  defaultLocale: 'ja',
  stacked: true,
},
colors: ['#318fb5', '#b0cac7', '#005086', '#f7d6bf', '#001244'],
plotOptions: {
  bar: {
    horizontal: false,
    borderRadius: 10,
  },
},
xaxis: {
  type: 'datetime' as 'datetime',
  labels: {
    format: 'MM月dd日',
  },
},
yaxis: {
  title: {
    text: '人数',
  },
  labels: {
    formatter: (value: number) => {
      return Math.round(value * 10) / 10 + '人';
    },
  },
},
tooltip: {
  x: {
    format: 'MM月dd日',
  },
},

};

Reproduction Link

rnrnstar2 commented 2 years ago

This is a sandbox where you can check the error. https://codesandbox.io/embed/react-basic-example-forked-ryepb?fontsize=14&hidenavigation=1&theme=dark