Echarts on legend selection event not working

I am fixing a chart used in a product. The issue is when the legend is selected the x-axis should change the dates according. Currently, the code of my graph is:

// initializing graph
var months_graph_by_visitors = ec.init(document.getElementById("analytify_months_graph_by_visitors"));
// graph functionality 
var months_graph_by_visitors_option = {
            tooltip: {
              position: function (p) {
                if (
                  $("#analytify_months_graph_by_visitors").width() - p[0] <=
                  200
                ) {
                  return [p[0] - 170, p[1]];
                }
              },
              formatter: function (params, ticket, callback) {
                var month_name = "";
                if (params.seriesIndex == "0" && data.stats_data.this_month_users_data.length != 1 ) {
                  var s_date = moment(params.name, "D-MMM", true).format(
                      "MMM DD"
                    ),
                    month_name = moment(s_date, "MMM DD", true)
                      .add(-1, "months")
                      .format("D-MMM");
                } else {
                  month_name = params.name;
                }
                return (
                  params.seriesName +
                  "<br />" +
                  month_name +
                  " : " +
                  params.value
                );
              },
              show: true,
            },
            color: [
              data.stats_data.graph_colors.visitors_last_month,
              data.stats_data.graph_colors.visitors_this_month,
            ],
            legend: {
              data: [
                data.stats_data.visitors_last_month_legend,
                data.stats_data.visitors_this_month_legend,
              ],
              orient: "horizontal",
            },
            toolbox: {
              show: true,
              color: ["#444444", "#444444", "#444444", "#444444"],
              feature: {
                magicType: {
                  show: true,
                  type: comp_graph_type === 'bar' ? ["bar", "line"] : ["line", "bar"],
                  title: {
                    line: "line",
                    bar: "bar",
                  },
                },
                restore: { show: true, title: "Restore" },
                saveAsImage: { show: true, title: "Save As Image" },
              },
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                data: data.stats_data.date_data,
              },
            ],
            yAxis: [
              {
                type: "value",
              },
            ],
            series: [
              {
                name: data.stats_data.visitors_last_month_legend,
                type: comp_graph_type,
                smooth: true,
                itemStyle: {
                  normal: {
                    areaStyle: {
                      type: "default",
                    },
                  },
                },
                data: data.stats_data.previous_month_users_data,
              },
              {
                name: data.stats_data.visitors_this_month_legend,
                type: comp_graph_type,
                smooth: true,
                itemStyle: {
                  normal: {
                    areaStyle: {
                      type: "default",
                    },
                  },
                },
                data: data.stats_data.this_month_users_data,
              },
            ],
          };
 // Load data into the ECharts instance.
 months_graph_by_visitors.setOption(months_graph_by_visitors_option);

I want to change the values of x-axis when the legend is selected. The legend has two options:

  1. visitor this month
  2. visitor last month

Now if I click on visitor this month the xaxis should have this month’s date and vice-versa.
In current code only data.stats.date_data show current month date. But I have fixed this by sending data to two variables data.stats.this_month_date_data and data.stats.previous_month_date_data. But I cannot be able to show this in the graph. I read the documentation of echarts and over there the following way was mentioned:

myChart.on('legendselectchanged', function(params) {
  // State if legend is selected.
  var isSelected = params.selected[params.name];
  // print in the console.
  console.log(
    (isSelected ? 'Selected' : 'Not Selected') + 'legend' + params.name
  );
  // print for all legends.
  console.log(params.selected);
});

I tested this but no data was logged. Can anyone guide me in this issue so that I can fix the issue.

  • Your echarts instance is calles months_graph_by_visitors not myChart.

    – 

  • I know. That is a typo. But by using months_graph_by_visitors still the legend events do not worked.

    – 

  • I would need to know what is stored in your variables, for example data.stats_data.visitors_last_month_legend. Pls make a minimal reproducable example, preferibly in the echarts editor.

    – 

Leave a Comment