How can I use palette color or multiple grid color based on data range ?

[aaron]

I am unable to use palette colors for the line series.

I would like to display colors based on the line series seen in the image. this image is made from.net steema chart

Code: Select all

 for (var t = 0; t < _data.xData.length; t++) {
        this._series0.data.values[t] = _data.yData[t];
        this._series0.data.x[t] = new Date(_data.timeStampData[t]);
        this._series0.palette.colors[t] =_data.colorData[t];
        }
        

[Marc]

Hello,

A typical application of palette would go like this:

Code: Select all

colorList = ["rgba(130,155,254,1.0)","rgba(252,209,36,1.0)","rgba(124,188,13,1.0)","rgba(253,133,47,1.0)",
	 "rgba(253,254,252,1.0)","rgba(226,78,33,1.0)","rgba(41,56,214,1.0)","rgba(183,148,0,1.0)",
	 "rgba(90,134,0,1.0)","rgba(210,70,0,1.0)","rgba(211,229,250,1.0)","rgba(216,216,216,1.0)",
	 "rgba(95,113,123,1.0)"];
		 
Chart1.palette.colors = colorList;

if (Chart1.series.items.length > 0) {
  for (var i = 0; i < Chart1.series.items.length; i++)
  {
	Chart1.series.items[i].format.fill=c.palette.get(i);
	if ((Chart1.series.items[i].pointer != null) && (Chart1.series.items[i].pointer.format != null))
	{
	  Chart1.series.items[i].pointer.format.fill=Chart1.palette.get(i);
	}
  }
}	

Regards,
Marc Meumann

[aaron]

here is my code & it is not working .
I am only looking for _series0 for color palettes

Code: Select all

 	this.TChart.addSeries(this._series0);
      this.TChart.addSeries(this._series1);

      this._series0.data.x = [];
      this._series1.data.x = [];
      this._series0.palette.colors = [];
       // this._series0.colorEach = "yes";
      // this._series0.visible = true;
      // this._series0.pointer.visible = true;
      
      for (var t = 0; t < _data.xData.length; t++) {
          this._series0.data.values[t] = _data.yData[t];
          this._series0.data.x[t] = new Date(_data.timeStampData[t]);

          const color_rgba = _data.colorData[t];
          this._series0.palette.colors[t] = `rgba(${color_rgba.r},${color_rgba.g},${color_rgba.b},${color_rgba.a})`;
          this._series1.data.values[t] = _data.hookloadData[t];
          this._series1.data.x[t] = new Date(_data.timeStampData[t]);
        }

        this.TChart.series.items[0].format.stroke.size = 2;
        this.TChart.series.items[1].format.stroke.size = 1;
        this.TChart.series.items[0].format.fill = this._series0.palette.colors;

[Marc]

Hello,

This is normally achieved by using the series.colorEach property but that influences the colour of line-pointers (when visible) and not the line itself, We are modifying the TeeChart code to include colorEach for the line segments themselves.

Ref: https://www.steema.com/bugs/show_bug.cgi?id=2609

Regards,
Marc

[aaron]

I think its fixed , how can I used it

[Marc]

Hello,

Yes, the latest npm update, v3.0.1, https://www.npmjs.com/package/TeeChart, includes the modification.

Use via:

Code: Select all

Chart1.series.items[0].colorEachLine="yes";   //or true

Regards,
Marc

[aaron]

Thanks, Its working now