Bar and Legend colors

TeeChart for JavaScript for the HTML5 Canvas
Post Reply
Jim Green
Newbie
Newbie
Posts: 6
Joined: Mon Jul 21, 2014 12:00 am

Bar and Legend colors

Post by Jim Green » Tue Jul 07, 2015 3:07 pm

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
Attachments
BarColors.zip
(2 KiB) Downloaded 796 times

Jim Green
Newbie
Newbie
Posts: 6
Joined: Mon Jul 21, 2014 12:00 am

Re: Bar and Legend colors

Post by Jim Green » Tue Jul 07, 2015 11:03 pm

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
Site Admin
Site Admin
Posts: 9514
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Bar and Legend colors

Post by Yeray » Thu Jul 09, 2015 10:15 am

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];
	  }
	}
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

Post Reply