CODEWITHSUNDEEP
chartsechartscandlestick-chartcandlesticks
Zullu Balti
Zullu Balti

Reputation: 73

Echarts candle sticks are too short

I'm using echarts-for-react to display a candle stick chart and sometimes when the interval is too small. I'm getting candle sticks that are too small. I try to set the yAxis min and max value but it didn't work.

any help?

here's my code

  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
      },
    },
    axisPointer: {
      link: [{ xAxisIndex: "all" }],
    },
    xAxis: {
      data: state?.times?.map?.(i => new Date(i)).map(a => new Intl.DateTimeFormat().format(a)),
      splitLine: { show: false },
      axisLine: { show: false },
      axisTick: { show: false },
    },
    yAxis: {
      splitLine: {
        show: false,
        min: min || 0,
        max: max || 0,
      },
    },
    grid: {
      left: 0,
    },
    dataZoom: [
      {
        type: "inside",
        minValueSpan: 10,
      },
    ],
    series: [
      {
        type: "candlestick",
        data: state?.prices,
      },
    ],
  };

<EChartsReact
   option={option}
   className="react-charts-custom"
   style={{ height: "600px" }}
/>

Here's some SSenter image description here

enter image description here

Upvotes: 0

Views: 157

Answers (1)

Zullu Balti
Zullu Balti

Reputation: 73

As @Matthais Mertens mentioned in the comments seting scale: true solves the issue

Upvotes: 0

Related Questions