search

apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.48k stars 19.62k forks source link

Align Multiple xAxis #18748

Closed Khalilsqu closed 1 year ago

Khalilsqu commented 1 year ago

What problem does this feature solve?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Apache ECharts Grouped Bar Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
  </head>
  <body>
    <div id="gradeChart" style="width: 600px; height: 400px"></div>

    <script>
      var myChart = echarts.init(document.getElementById("gradeChart"));

      const data = [
        [
          {
            gradeLetter: "A",
            genderValue: "Male",
            majorValue: "ERSC",
            genderCount: 3,
            majorCount: 2,
          },
          {
            gradeLetter: "A",
            genderValue: "Male",
            majorValue: "PNGE",
            genderCount: 3,
            majorCount: 0,
          },
          {
            gradeLetter: "A",
            genderValue: "Male",
            majorValue: "GEOP",
            genderCount: 3,
            majorCount: 1,
          },
          {
            gradeLetter: "A",
            genderValue: "Male",
            majorValue: "ACHEM",
            genderCount: 3,
            majorCount: 0,
          },
          {
            gradeLetter: "A",
            genderValue: "Male",
            majorValue: "CEHM",
            genderCount: 3,
            majorCount: 0,
          },
          {
            gradeLetter: "A",
            genderValue: "Female",
            majorValue: "ERSC",
            genderCount: 7,
            majorCount: 2,
          },
          {
            gradeLetter: "A",
            genderValue: "Female",
            majorValue: "PNGE",
            genderCount: 7,
            majorCount: 4,
          },
          {
            gradeLetter: "A",
            genderValue: "Female",
            majorValue: "GEOP",
            genderCount: 7,
            majorCount: 1,
          },
          {
            gradeLetter: "A",
            genderValue: "Female",
            majorValue: "ACHEM",
            genderCount: 7,
            majorCount: 0,
          },
          {
            gradeLetter: "A",
            genderValue: "Female",
            majorValue: "CEHM",
            genderCount: 7,
            majorCount: 0,
          },
        ],
        [
          {
            gradeLetter: "A-",
            genderValue: "Male",
            majorValue: "ERSC",
            genderCount: 3,
            majorCount: 0,
          },
          {
            gradeLetter: "A-",
            genderValue: "Male",
            majorValue: "PNGE",
            genderCount: 3,
            majorCount: 0,
          },
          {
            gradeLetter: "A-",
            genderValue: "Male",
            majorValue: "GEOP",
            genderCount: 3,
            majorCount: 2,
          },
          {
            gradeLetter: "A-",
            genderValue: "Male",
            majorValue: "ACHEM",
            genderCount: 3,
            majorCount: 0,
          },
          {
            gradeLetter: "A-",
            genderValue: "Male",
            majorValue: "CEHM",
            genderCount: 3,
            majorCount: 1,
          },
          {
            gradeLetter: "A-",
            genderValue: "Female",
            majorValue: "ERSC",
            genderCount: 6,
            majorCount: 1,
          },
          {
            gradeLetter: "A-",
            genderValue: "Female",
            majorValue: "PNGE",
            genderCount: 6,
            majorCount: 3,
          },
          {
            gradeLetter: "A-",
            genderValue: "Female",
            majorValue: "GEOP",
            genderCount: 6,
            majorCount: 0,
          },
          {
            gradeLetter: "A-",
            genderValue: "Female",
            majorValue: "ACHEM",
            genderCount: 6,
            majorCount: 2,
          },
          {
            gradeLetter: "A-",
            genderValue: "Female",
            majorValue: "CEHM",
            genderCount: 6,
            majorCount: 0,
          },
        ],
        [
          {
            gradeLetter: "B+",
            genderValue: "Male",
            majorValue: "ERSC",
            genderCount: 6,
            majorCount: 5,
          },
          {
            gradeLetter: "B+",
            genderValue: "Male",
            majorValue: "PNGE",
            genderCount: 6,
            majorCount: 1,
          },
          {
            gradeLetter: "B+",
            genderValue: "Male",
            majorValue: "GEOP",
            genderCount: 6,
            majorCount: 0,
          },
          {
            gradeLetter: "B+",
            genderValue: "Male",
            majorValue: "ACHEM",
            genderCount: 6,
            majorCount: 0,
          },
          {
            gradeLetter: "B+",
            genderValue: "Male",
            majorValue: "CEHM",
            genderCount: 6,
            majorCount: 0,
          },
          {
            gradeLetter: "B+",
            genderValue: "Female",
            majorValue: "ERSC",
            genderCount: 2,
            majorCount: 0,
          },
          {
            gradeLetter: "B+",
            genderValue: "Female",
            majorValue: "PNGE",
            genderCount: 2,
            majorCount: 0,
          },
          {
            gradeLetter: "B+",
            genderValue: "Female",
            majorValue: "GEOP",
            genderCount: 2,
            majorCount: 0,
          },
          {
            gradeLetter: "B+",
            genderValue: "Female",
            majorValue: "ACHEM",
            genderCount: 2,
            majorCount: 2,
          },
          {
            gradeLetter: "B+",
            genderValue: "Female",
            majorValue: "CEHM",
            genderCount: 2,
            majorCount: 0,
          },
        ],
        [
          {
            gradeLetter: "B",
            genderValue: "Male",
            majorValue: "ERSC",
            genderCount: 4,
            majorCount: 1,
          },
          {
            gradeLetter: "B",
            genderValue: "Male",
            majorValue: "PNGE",
            genderCount: 4,
            majorCount: 2,
          },
          {
            gradeLetter: "B",
            genderValue: "Male",
            majorValue: "GEOP",
            genderCount: 4,
            majorCount: 0,
          },
          {
            gradeLetter: "B",
            genderValue: "Male",
            majorValue: "ACHEM",
            genderCount: 4,
            majorCount: 0,
          },
          {
            gradeLetter: "B",
            genderValue: "Male",
            majorValue: "CEHM",
            genderCount: 4,
            majorCount: 1,
          },
          {
            gradeLetter: "B",
            genderValue: "Female",
            majorValue: "ERSC",
            genderCount: 6,
            majorCount: 0,
          },
          {
            gradeLetter: "B",
            genderValue: "Female",
            majorValue: "PNGE",
            genderCount: 6,
            majorCount: 3,
          },
          {
            gradeLetter: "B",
            genderValue: "Female",
            majorValue: "GEOP",
            genderCount: 6,
            majorCount: 3,
          },
          {
            gradeLetter: "B",
            genderValue: "Female",
            majorValue: "ACHEM",
            genderCount: 6,
            majorCount: 0,
          },
          {
            gradeLetter: "B",
            genderValue: "Female",
            majorValue: "CEHM",
            genderCount: 6,
            majorCount: 0,
          },
        ],
        [
          {
            gradeLetter: "B-",
            genderValue: "Male",
            majorValue: "ERSC",
            genderCount: 5,
            majorCount: 4,
          },
          {
            gradeLetter: "B-",
            genderValue: "Male",
            majorValue: "PNGE",
            genderCount: 5,
            majorCount: 1,
          },
          {
            gradeLetter: "B-",
            genderValue: "Male",
            majorValue: "GEOP",
            genderCount: 5,
            majorCount: 0,
          },
          {
            gradeLetter: "B-",
            genderValue: "Male",
            majorValue: "ACHEM",
            genderCount: 5,
            majorCount: 0,
          },
          {
            gradeLetter: "B-",
            genderValue: "Male",
            majorValue: "CEHM",
            genderCount: 5,
            majorCount: 0,
          },
          {
            gradeLetter: "B-",
            genderValue: "Female",
            majorValue: "ERSC",
            genderCount: 5,
            majorCount: 2,
          },
          {
            gradeLetter: "B-",
            genderValue: "Female",
            majorValue: "PNGE",
            genderCount: 5,
            majorCount: 2,
          },
          {
            gradeLetter: "B-",
            genderValue: "Female",
            majorValue: "GEOP",
            genderCount: 5,
            majorCount: 0,
          },
          {
            gradeLetter: "B-",
            genderValue: "Female",
            majorValue: "ACHEM",
            genderCount: 5,
            majorCount: 0,
          },
          {
            gradeLetter: "B-",
            genderValue: "Female",
            majorValue: "CEHM",
            genderCount: 5,
            majorCount: 1,
          },
        ],
        [
          {
            gradeLetter: "C+",
            genderValue: "Male",
            majorValue: "ERSC",
            genderCount: 1,
            majorCount: 0,
          },
          {
            gradeLetter: "C+",
            genderValue: "Male",
            majorValue: "PNGE",
            genderCount: 1,
            majorCount: 1,
          },
          {
            gradeLetter: "C+",
            genderValue: "Male",
            majorValue: "GEOP",
            genderCount: 1,
            majorCount: 0,
          },
          {
            gradeLetter: "C+",
            genderValue: "Male",
            majorValue: "ACHEM",
            genderCount: 1,
            majorCount: 0,
          },
          {
            gradeLetter: "C+",
            genderValue: "Male",
            majorValue: "CEHM",
            genderCount: 1,
            majorCount: 0,
          },
          {
            gradeLetter: "C+",
            genderValue: "Female",
            majorValue: "ERSC",
            genderCount: 2,
            majorCount: 1,
          },
          {
            gradeLetter: "C+",
            genderValue: "Female",
            majorValue: "PNGE",
            genderCount: 2,
            majorCount: 1,
          },
          {
            gradeLetter: "C+",
            genderValue: "Female",
            majorValue: "GEOP",
            genderCount: 2,
            majorCount: 0,
          },
          {
            gradeLetter: "C+",
            genderValue: "Female",
            majorValue: "ACHEM",
            genderCount: 2,
            majorCount: 0,
          },
          {
            gradeLetter: "C+",
            genderValue: "Female",
            majorValue: "CEHM",
            genderCount: 2,
            majorCount: 0,
          },
        ],
        [
          {
            gradeLetter: "C",
            genderValue: "Male",
            majorValue: "ERSC",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "C",
            genderValue: "Male",
            majorValue: "PNGE",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "C",
            genderValue: "Male",
            majorValue: "GEOP",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "C",
            genderValue: "Male",
            majorValue: "ACHEM",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "C",
            genderValue: "Male",
            majorValue: "CEHM",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "C",
            genderValue: "Female",
            majorValue: "ERSC",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "C",
            genderValue: "Female",
            majorValue: "PNGE",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "C",
            genderValue: "Female",
            majorValue: "GEOP",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "C",
            genderValue: "Female",
            majorValue: "ACHEM",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "C",
            genderValue: "Female",
            majorValue: "CEHM",
            genderCount: 0,
            majorCount: 0,
          },
        ],
        [
          {
            gradeLetter: "C-",
            genderValue: "Male",
            majorValue: "ERSC",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "C-",
            genderValue: "Male",
            majorValue: "PNGE",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "C-",
            genderValue: "Male",
            majorValue: "GEOP",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "C-",
            genderValue: "Male",
            majorValue: "ACHEM",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "C-",
            genderValue: "Male",
            majorValue: "CEHM",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "C-",
            genderValue: "Female",
            majorValue: "ERSC",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "C-",
            genderValue: "Female",
            majorValue: "PNGE",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "C-",
            genderValue: "Female",
            majorValue: "GEOP",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "C-",
            genderValue: "Female",
            majorValue: "ACHEM",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "C-",
            genderValue: "Female",
            majorValue: "CEHM",
            genderCount: 0,
            majorCount: 0,
          },
        ],
        [
          {
            gradeLetter: "D+",
            genderValue: "Male",
            majorValue: "ERSC",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "D+",
            genderValue: "Male",
            majorValue: "PNGE",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "D+",
            genderValue: "Male",
            majorValue: "GEOP",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "D+",
            genderValue: "Male",
            majorValue: "ACHEM",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "D+",
            genderValue: "Male",
            majorValue: "CEHM",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "D+",
            genderValue: "Female",
            majorValue: "ERSC",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "D+",
            genderValue: "Female",
            majorValue: "PNGE",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "D+",
            genderValue: "Female",
            majorValue: "GEOP",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "D+",
            genderValue: "Female",
            majorValue: "ACHEM",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "D+",
            genderValue: "Female",
            majorValue: "CEHM",
            genderCount: 0,
            majorCount: 0,
          },
        ],
        [
          {
            gradeLetter: "D",
            genderValue: "Male",
            majorValue: "ERSC",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "D",
            genderValue: "Male",
            majorValue: "PNGE",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "D",
            genderValue: "Male",
            majorValue: "GEOP",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "D",
            genderValue: "Male",
            majorValue: "ACHEM",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "D",
            genderValue: "Male",
            majorValue: "CEHM",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "D",
            genderValue: "Female",
            majorValue: "ERSC",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "D",
            genderValue: "Female",
            majorValue: "PNGE",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "D",
            genderValue: "Female",
            majorValue: "GEOP",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "D",
            genderValue: "Female",
            majorValue: "ACHEM",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "D",
            genderValue: "Female",
            majorValue: "CEHM",
            genderCount: 0,
            majorCount: 0,
          },
        ],
        [
          {
            gradeLetter: "F",
            genderValue: "Male",
            majorValue: "ERSC",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "F",
            genderValue: "Male",
            majorValue: "PNGE",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "F",
            genderValue: "Male",
            majorValue: "GEOP",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "F",
            genderValue: "Male",
            majorValue: "ACHEM",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "F",
            genderValue: "Male",
            majorValue: "CEHM",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "F",
            genderValue: "Female",
            majorValue: "ERSC",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "F",
            genderValue: "Female",
            majorValue: "PNGE",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "F",
            genderValue: "Female",
            majorValue: "GEOP",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "F",
            genderValue: "Female",
            majorValue: "ACHEM",
            genderCount: 0,
            majorCount: 0,
          },
          {
            gradeLetter: "F",
            genderValue: "Female",
            majorValue: "CEHM",
            genderCount: 0,
            majorCount: 0,
          },
        ],
      ];
      const data3 = data.map((grade) => {
        return {
          category: grade[0].gradeLetter,
          bars: grade.map((item) => {
            return {
              name: item.majorValue,
              value:
                item.genderValue === "Male"
                  ? item.majorCount
                  : -item.majorCount,
              positive: item.genderValue === "Male" ? true : false,
            };
          }),
        };
      });

      const options = {
        legend: {
          show: true,
        },
        xAxis: [
          {
            type: "value",
            name: "Number of Students",
            nameLocation: "middle",
            nameGap: 30,
            nameTextStyle: {
              fontSize: 15,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              formatter: function (value) {
                return Math.abs(value);
              },
            },
          },
          {
            type: "category",
            position: "top",
            splitLine: {
              show: true,
              onZero: true,
            },
            data: ["Male", "Female"],
            align: "center",
          },
        ],
        yAxis: {
          inverse: true,
          type: "category",
          data: data3.map((item) => item.category),
          splitLine: {
            show: true,
          },
        },
        series: data3[0].bars.map((_, index) => {
          return {
            type: "bar",
            name: data3[0].bars[index].name,
            seriesName: data3[0].bars[index].positive ? "Male" : "Female",
            stack: "total",
            label: {
              show: true,
              formatter: function (params) {
                if (params.value === 0) {
                  return "";
                }
                return Math.abs(params.value);
              },
            },
            data: data3.map((item) => item.bars[index].value),
          };
        }),
      };
      // use configuration item and data specified to show chart

      myChart.setOption(options);
    </script>
  </body>
</html>

image

How can I align multiple xAxis horizontally? I want the category xAxis to be split exactly at zero value of the value xAxis.

What does the proposed API look like?

Align Multiple xAxis

echarts-bot[bot] commented 1 year ago

I'm sorry to close this issue for it lacks the necessary title. Please provide a descriptive and as concise as possible title to describe your problems or requests and then the maintainers or I will reopen this issue.

Every good bug report or feature request starts with a title. Your issue title is a critical element as it's the first thing maintainers see.

A good issue title makes it easier for maintainers to understand what the issue is, easily locate it, and know what steps they'll need to take to fix it.

Moreover, it's better to include keywords, as this makes it easier to find the issue self and similar issues in searches.

helgasoft commented 1 year ago

good question - how to align two axes when one is value and the other is category ? A hacky solution with a dummy series - Demo Code

image NB: please close issue if problem solved.

Khalilsqu commented 1 year ago

@helgasoft Thank you very much. I really appreciate your help. This solved my issue.