Question 295570 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Update style of individual legend item in Highcarts pie chart

I am trying to style the corresponding legend item when hovering over a slice in the pie chart. I am able to update the style of the entire legend (all legend items) using the following plotOptions:

plotOptions: {
                series: {
                    point: {
                        events: {
                            mouseOver: function () {
                                this.series.chart.legend.update({
                                    itemStyle: {
                                        fontWeight: "bold",
                                    },
                                });
                            },
                            mouseOut: function () {
                                 this.series.chart.legend.update({
                                     itemStyle: {
                                         fontWeight: "normal",
                                     },
                                 });
                            },
                        },
                    },
                },
            },

So how can I access the CSS of the individual items?

Tags:

2

Answers


  1. 0

    One way to alter one label individually is to use the events to set a user option, which is then used in the label formatting to distinguish it from the other labels.

    For example, in the events we set hovering: true or hovering: false. Then in the formatter we apply separate HTML around the label name to distinguish it, like <b> or you could perhaps use <span> with style.

    See this example (or this JSFiddle demonstration):

    Highcharts.chart('container', {
  plotOptions: {
    series: {
      point: {
        events: {
          mouseOver: function() {
            if (!this.series.userOptions.hovering) {
              this.series.update({
                hovering: true
              })
            }
          },
          mouseOut: function() {
            if (this.series.userOptions.hovering) {
              this.series.update({
                  hovering: false
              })
            }
          },
        },
      },
    },
  },

  legend: {
    labelFormatter: function() {
      if (this.userOptions.hovering) {
        return "<b>" + this.name + "</b>"
      } else {
        return this.name
      }
    }
  },

  series: [{
    data: [10, 11, 12, 13, 14, 15]
  }, {
    data: [20, 21, 22, 23, 24, 25]
  }, {
    data: [30, 31, 32, 33, 34, 35]
  }, {
    data: [1, 11, 21, 31, 41]
  }],

});
    Login or Signup to reply.
  2. 0

    You can use a reference from a point to the legend item. For example: this.legendItem.label

      plotOptions: {
    series: {
      point: {
        events: {
          mouseOver: function() {
            this.legendItem.label.css({
              fontWeight: "bold"
            });
          },
          mouseOut: function() {
            this.legendItem.label.css({
              fontWeight: "normal"
            });
          }
        }
      }
    }
  }

    Live demo: https://jsfiddle.net/BlackLabel/4tevkco0/

    API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#css

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search