title: How to dynamically emphasis a specific category on a bar chart with a background on echarts-for-react
body: <p>I'm using echarts and i'm trying to emphasis the &quot;current picked bar&quot; 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.</p>
  <p>Makes sense?
  Here's a codesandbox that emphasis my idea:
  <a href="https://codesandbox.io/s/flamboyant-cloud-zy44j?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/flamboyant-cloud-zy44j?file=/src/App.js</a></p>
  <p>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.</p>
  <p>I'm also attaching pictures to explain what should be.</p>
  <p>And also attaching the code.</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  import ReactEcharts from &quot;echarts-for-react&quot;;
  import moment from &quot;moment&quot;;
  
  export default function App() {
    const [month, setMonth] = useState(0);
    const onChartClick = (params) =&gt; {
      const monthClicked = moment().month(params.name).month();
      setMonth(monthClicked);
    };
    console.log(month);
    const renderChart = () =&gt; {
      const _onEvents = {
        click: onChartClick
      };
      const option = {
        maintainAspectRatio: false,
        tooltip: {
          trigger: &quot;item&quot;
        },
        grid: {
          left: &quot;0px&quot;,
          right: &quot;0px&quot;,
          bottom: &quot;0px&quot;,
          top: &quot;0px&quot;,
          containLabel: false,
          show: false
        },
        xAxis: {
          position: &quot;top&quot;,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            inside: true,
            color: &quot;#74818f&quot;,
            fontFamily: &quot;SegoePro-Regular&quot;,
            fontSize: 12
          },
          splitNumber: 1,
          splitLine: {
            show: true,
            lineStyle: {
              color: [
                &quot;#ffffff&quot;,
                &quot;#eaeaea&quot;,
                &quot;#eaeaea&quot;,
                &quot;#eaeaea&quot;,
                &quot;#eaeaea&quot;,
                &quot;#eaeaea&quot;,
                &quot;#eaeaea&quot;,
                &quot;#eaeaea&quot;,
                &quot;#eaeaea&quot;,
                &quot;#eaeaea&quot;,
                &quot;#eaeaea&quot;,
                &quot;#eaeaea&quot;,
                &quot;#ffffff&quot;,
                &quot;#ffffff&quot;,
                &quot;#ffffff&quot;
              ]
            }
          },
          type: &quot;category&quot;,
          data: [
            &quot;January&quot;,
            &quot;February&quot;,
            &quot;March&quot;,
            &quot;April&quot;,
            &quot;May&quot;,
            &quot;June&quot;,
            &quot;July&quot;,
            &quot;August&quot;,
            &quot;September&quot;,
            &quot;October&quot;,
            &quot;November&quot;,
            &quot;December&quot;
          ]
        },
        yAxis: {
          scale: true,
          type: &quot;value&quot;,
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            onZero: false
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: &quot;Monthly Income&quot;,
            type: &quot;bar&quot;,
            barWidth: &quot;30%&quot;,
            barGap: &quot;-20%&quot;,
            label: {
              show: true,
              position: &quot;top&quot;,
              fontSize: 12,
              fontFamily: &quot;SegoePro-Bold&quot;,
              color: &quot;#3d70ff&quot;
            },
            itemStyle: {
              opacity: 0.7,
              color: &quot;#3d70ff&quot;
            },
            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: &quot;#f5f7fa&quot;
              },
              label: {
                show: false
              }
            }
          }
        ]
      };
      const chartStyle = 280;
      return (
        &lt;div id=&quot;chart_div&quot;&gt;
          &lt;div className=&quot;chart-wrapper&quot;&gt;
            &lt;ReactEcharts
              onEvents={_onEvents}
              option={option}
              style={{ height: chartStyle }}
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    };
    return renderChart();
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/ifBBr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ifBBr.png" alt="Current situation" /></a>
  <a href="https://i.stack.imgur.com/iMCTO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iMCTO.png" alt="Desired situation" /></a></p>