How to dynamically emphasis a specific category on a bar chart with a background on echarts-for-react

Question

I'm using echarts and i'm trying to emphasis the "current picked bar" by adding background color. I want to be able to click on one of the bars, and by doing so the month will change and the background color will be applied on the back of that month.

Makes sense? Here's a codesandbox that emphasis my idea: https://codesandbox.io/s/flamboyant-cloud-zy44j?file=/src/App.js

But going over and documentation it seems as though there is no option to add backgroundColor to just one category / bar. I tried using another series but that did not work.

I'm also attaching pictures to explain what should be.

And also attaching the code.

import React, { useState } from "react";
import "./styles.css";
import ReactEcharts from "echarts-for-react";
import moment from "moment";

export default function App() {
  const [month, setMonth] = useState(0);
  const onChartClick = (params) => {
    const monthClicked = moment().month(params.name).month();
    setMonth(monthClicked);
  };
  console.log(month);
  const renderChart = () => {
    const _onEvents = {
      click: onChartClick
    };
    const option = {
      maintainAspectRatio: false,
      tooltip: {
        trigger: "item"
      },
      grid: {
        left: "0px",
        right: "0px",
        bottom: "0px",
        top: "0px",
        containLabel: false,
        show: false
      },
      xAxis: {
        position: "top",
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          inside: true,
          color: "#74818f",
          fontFamily: "SegoePro-Regular",
          fontSize: 12
        },
        splitNumber: 1,
        splitLine: {
          show: true,
          lineStyle: {
            color: [
              "#ffffff",
              "#eaeaea",
              "#eaeaea",
              "#eaeaea",
              "#eaeaea",
              "#eaeaea",
              "#eaeaea",
              "#eaeaea",
              "#eaeaea",
              "#eaeaea",
              "#eaeaea",
              "#eaeaea",
              "#ffffff",
              "#ffffff",
              "#ffffff"
            ]
          }
        },
        type: "category",
        data: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
        ]
      },
      yAxis: {
        scale: true,
        type: "value",
        axisLabel: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false,
          onZero: false
        },
        splitLine: {
          show: false
        }
      },
      series: [
        {
          name: "Monthly Income",
          type: "bar",
          barWidth: "30%",
          barGap: "-20%",
          label: {
            show: true,
            position: "top",
            fontSize: 12,
            fontFamily: "SegoePro-Bold",
            color: "#3d70ff"
          },
          itemStyle: {
            opacity: 0.7,
            color: "#3d70ff"
          },
          emphasis: {
            itemStyle: {
              opacity: 1
            }
          },
          tooltip: {},
          data: [
            8700,
            8700,
            10400,
            8699,
            8699,
            8699,
            8699,
            8699,
            11643.46,
            0,
            0,
            0
          ],
          markArea: {
            silent: true,
            data: [
              [
                {
                  coord: [0, 0]
                },
                {
                  coord: [100, 100]
                }
              ]
            ],
            itemStyle: {
              color: "#f5f7fa"
            },
            label: {
              show: false
            }
          }
        }
      ]
    };
    const chartStyle = 280;
    return (
      <div id="chart_div">
        <div className="chart-wrapper">
          <ReactEcharts
            onEvents={_onEvents}
            option={option}
            style={{ height: chartStyle }}
          />
        </div>
      </div>
    );
  };
  return renderChart();
}

Answer 1

the requirement is unachievable with this library. you can make x-axis clickable by triggerEvent and do something with it; but adding a background or any other style on a "clicked" bar ( or axis ) needs a dedicated state; clicked state; which this library doesn't have; it listens to click events, but doesn't keep it on individual elements; so you can't style it based on a state that doesn't exist; I was thinking about a workaround to make it happen by some applying css styles on clicked/hovered bars to fake the effect somehow but all the content are rendered inside a canvas, so no option remains; either use another library or write a chart drawer component yourself or forget this specific styling based on click;