New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

className for halo #8119

Closed
robbertbrak opened this Issue Apr 4, 2018 · 2 comments

Comments

Projects
None yet
2 participants
@robbertbrak

robbertbrak commented Apr 4, 2018

When I'm creating a pie chart using styled mode, I can assign a className to each data point (https://api.highcharts.com/highcharts/series.pie.data). However, this className is not added to the halo of the hovered pie slice (https://api.highcharts.com/highcharts/plotOptions.series.states.hover.halo). That makes it a bit cumbersome to style the halo. Would it be possible for the halo to 'inherit' the className of the hovered data point?

For example, suppose I have 'status_ok' and 'status_error' classes, which are styled green and red. I would like the halos to be green and red as well. Right now I have to resort to something like this:

.highcharts-point.status_ok {
  fill: #339933;
  &.highcharts-point-hover ~ .highcharts-halo { fill: #339933; }
}

.highcharts-point.status_error {
  fill: #ff3333;
  &.highcharts-point-hover ~ .highcharts-halo { fill: #ff3333; }
}

That works, but it would be nice if I could simply write:

.highcharts-point.status_ok, .highcharts-halo.status_ok { fill: #339933; }
.highcharts-point.status_error, .highcharts-halo.status_error { fill: #ff3333; }
@sebastianbochan

This comment has been minimized.

Contributor

sebastianbochan commented Apr 4, 2018

Hi @robbertbrak
It is a good idea!

Workaround:
I think that simpler is use + in CSS declaration

@robbertbrak

This comment has been minimized.

robbertbrak commented Apr 4, 2018

@sebastianbochan: Unfortunately using + does not work, because within the .highcharts-series all the highcharts-point paths are at the same depth, followed by a single .highcharts-halo. See http://jsfiddle.net/9ha95q5c/2/ for why this does not work: the red point incorrectly gets a blue halo.

A second point: I now realize that I would actually like the className to be used for everything related to the data point, not just the halo. For example, a pie slice may have a label connector with base class highcharts-data-label-connector. The connector gets an additional highcharts-color-{n} class that I could in theory use.

However, that doesn't work for me, because I don't know in advance whether my status_ok data point is going to get highcharts-color-0 or highcharts-color-1. So it would be nice if the status_ok class would also be assigned to the label connector and all other chart elements uniquely connected to the data point.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment