Bar and Legend colors

[Jim Green]

Hello, I have four bar series to show. Normally the color of each bar within a series is constant, so I define "series.format.fill = aColor;" and this is the color shown in bar and the legend text for the series.

I also have a gradient on each bar that can vary by point. Based on help I got on this forum, I defined a "series.getFill" function that looks up the gradient colors from an array and returns them with:

Code: Select all

function getFill(index, f) {
  var gr = f ? f.gradient : null;  // f is null when called for the legend symbol
  if (gr && gr.visible) {
    gr.colors = SeriesColors[this.indices[index]];
    gr.stops = [0, 1];
  }
  return null;
}

So far, so good. At other times I have to control the color of each point and have some series that have solid color with a pattern instead of a gradient. So I modified the function to:

Code: Select all

function getFill(series, index, f) {
  var gr = f ? f.gradient : null;
  if (gr && gr.visible) {
    gr.colors = SeriesColors[this.indices[index]];
    gr.stops = [0, 1];
  } else {
    if (!f) {  // when called to get color for legend symbol; index is 0-3
      return SeriesColors[index+1][0];
    } else {  // for bar color
      f.fill = SeriesColors[this.indices[index]][0];
    }
  }
  return null;
}

Here is the problem: for a non-gradient series, TeeChart gets both the bar color and the legend text color from f.fill. (It gets the legend symbol color from the getFill return value.) The first time the series are rendered, the legend text is fine; it uses the series.format.fill defined for the series. But if the legend is drawn again, "f.fill" contains the last color assigned to the series and that is the color used in the legend text.

So my problem is how to control the colors of the bars and the legend text independently.

I've attached an example. I removed the patterns so you don't need any additional files. When you first load the page the legend colors are fine (blue, gray, orange, green), but if you do anything to redraw the legend (resize, mouse over the bars) the text turns red (the color of the last points).

Thanks,
Jim

[Jim Green]

It just occurred to me that I can simply define all series with a gradient but use "start color = end color" to make it a solid color.

[Yeray]

Hello,

First note the legend is drawn before drawing the series.
Since you are changing the series format.fill color when drawing the series values at getFill, the second time the legend is drawn the series colors have changed.
You can restore the series colors calling the Chart ondraw event. Ie:

Code: Select all

	Chart1.ondraw=function(c) {
	  for (i=0;i<c.series.count();i++) {
	    c.series.items[i].format.fill = SeriesColors[i+1][1];
	  }
	}