Page 1 of 1
How can I use palette color or multiple grid color based on data range ?
Posted: Tue Apr 25, 2023 12:50 pm
by 17795639
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];
}
Re: How can I use palette color or multiple grid color based on data range ?
Posted: Tue Apr 25, 2023 2:44 pm
by 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
Re: How can I use palette color or multiple grid color based on data range ?
Posted: Tue Apr 25, 2023 6:42 pm
by 17795639
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;
Re: How can I use palette color or multiple grid color based on data range ?
Posted: Thu Apr 27, 2023 8:00 am
by 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
Re: How can I use palette color or multiple grid color based on data range ?
Posted: Mon May 01, 2023 1:05 pm
by 17795639
I think its fixed , how can I used it
Re: How can I use palette color or multiple grid color based on data range ?
Posted: Tue May 09, 2023 3:54 pm
by 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
Re: How can I use palette color or multiple grid color based on data range ?
Posted: Sun May 14, 2023 10:25 am
by 17795639
