reactjscharts

Making chart from react e chart fill the parent container

I want to make a chart with react-e-chart.js. Here is the code

import "../index.css";
import colorConst from "./constant/color.js";
import ReactEcharts from "echarts-for-react";
import PropTypes from "prop-types";

const LineChart = ({
  xData = [],
  yData = [],
  title,
  seriesData = [],
  width,
  height,
}) => {
  const vw = (1920 * width) / 100;
  const vh = (1080 * height) / 100;
  const vwpx = vw.toString() + "px";
  const vhpx = vh.toString() + "px";

  const option = {
    xAxis: {
      data: xData,
      type: "category",
    },
    yAxis: {
      type: "value",
    },
    tooltip: {
      trigger: "axis",
    },
    series: [
      {
        data: yData,
        type: "line",
        smooth: true,
        itemStyle: {
          opacity: 0,
          color: "black",
        },
        lineStyle: {
          color: "black",
        },
      },
      {
        data: yData,
        type: "line",
        smooth: true,
        itemStyle: {
          opacity: 0,
          color: "black",
        },
        lineStyle: {
          color: "blue",
        },
      },
    ],
  };

  return (
    <div
      className="flex flex-col bg-primary p-[15px]"
      style={{ width: vwpx, height: vhpx }}
    >
      <h1 className="text-[25px]">{title}</h1>
      <ReactEcharts option={option} className="bg-[red] h-full w-full" />
    </div>
  );
};

When I rendered it, i got the following results React Js Rendering

It is shown that the chart doesn't completely fill the remaining available space inside the parent container below it. Is there any way to make the chart fill the remaining space of container below it?

I have already use flexbox and h-full property but it doesn't really work for me

Thank you in advance

Solution

  • You have two ways of doing this, you can either set the classes flex flex-1 so that the chart stretches the dimensions of the container, else you can just apply the styles style={{ width: vwpx, height: vhpx }} directly on the chart, so that the parent and child are set with the same height!

    I would suggest directly setting vh and vw directly, instead of calculating based on pre defined dimensions (1920 x 1080). Since I don't know your requirements, I guess there is a reason for this.

    import ReactEcharts from 'echarts-for-react';
import React, { Component } from 'react';
export const LineChart = ({ xData = [], yData = [], title, width, height }) => {
  const vw = (1920 * width) / 100;
  const vh = (1080 * height) / 100;
  const vwpx = vw.toString() + 'px';
  const vhpx = vh.toString() + 'px';

  const option = {
    xAxis: {
      data: xData,
      type: 'category',
    },
    yAxis: {
      type: 'value',
    },
    tooltip: {
      trigger: 'axis',
    },
    series: [
      {
        data: yData,
        type: 'line',
        smooth: true,
        itemStyle: {
          opacity: 0,
          color: 'black',
        },
        lineStyle: {
          color: 'black',
        },
      },
      {
        data: yData,
        type: 'line',
        smooth: true,
        itemStyle: {
          opacity: 0,
          color: 'black',
        },
        lineStyle: {
          color: 'blue',
        },
      },
    ],
  };

  return (
    <div
      className="flex flex-col bg-primary p-[15px] bg-[yellow] "
      style={{ width: vwpx, height: vhpx }}
    >
      <h1 className="text-[25px]">{title}</h1>
      <ReactEcharts option={option} className="flex flex-1 bg-[transparent] h-full w-full" />
    </div>
  );
};

    stackblitz