Hi, I’ve run into a problem that I can’t seem to find a solution for. I am using the charts add-on version 3.0.0. In my specific case, I am displaying a chart of lab components. Each component has has a date and a value, as well as several other properties that I want to display in the tooltip (source, high/low normal range). Also, if an individual lab is out of its normal range, I want to change the color of the point and make it red.
At first, I started with DataSeries/DataSeriesItem, which let me color out of range points red, but the tooltip could only display the x and y values, and not the source and normal range values. After researching, I found that I could use a ContainerDataSeries along with an object with all the properties I wanted to display. Then I could use addAttributeToPropertyIdMapping to map additional properties into the series, which I could then refer to with a custom tooltip formatter, which is great - except now I’ve lost the ability to change the color on individual points! Ideally, the ContainerDataSeries object could allow me to set a property which it could interpret as the color for a given item, but it doesn’t as far as I can tell.
Does anyone know of a way to do this? Any insight would be greatly appreciated.
I was able to find somewhat of a solution, and maybe it will help someone in similar situation in the future.
What I did was I used two separate series, set the x and y on the first series, and the high/low on the second series. This allowed me to show whisker bars on the graph (using PlotOptionsErrorBar) for the normal ranges, which is a nice look. I set the color on the out-of-range values on the first series so they showed up red. Since the tooltip shows a line for each series, I provided a custom formatter for the second series:
tooltip.setPointFormat("(normal range: {point.low}-{point.high})<br/>Source: {point.id}");
This allowed me to show the reference range and the source. The total hack job is the source - I saw that there was a setId() on DataSeriesItem that is used to get a reference to the point object after rendering. I had no need for this so I tried using that field to store my source in, and it worked! I was worried since source is non-unique, but it doesn’t seem to affect the graph. I think if I had needed any more fields, I would have been in trouble.
So there’s my workaround, but I’d still be interested to hear if there is a better way.