Change line color in a line chart

TeeChart for JavaScript for the HTML5 Canvas
Post Reply
Osvano
Newbie
Newbie
Posts: 8
Joined: Fri Sep 07, 2012 12:00 am

Change line color in a line chart

Post by Osvano » Mon Sep 10, 2012 6:18 pm

Dear friends,

I need to change the line color of a line chart based on a condition,
In one part blue and the other red.
As in the example file "chart.jpg."

Someone can tell me how can I do this?

Att

Osvano.
Attachments
chart.jpg
chart.jpg
chart.jpg (225.12 KiB) Viewed 12546 times

Osvano
Newbie
Newbie
Posts: 8
Joined: Fri Sep 07, 2012 12:00 am

Re: Change line color in a line chart

Post by Osvano » Tue Sep 11, 2012 7:25 pm

Can anyone help me??

Sincerely,

Osvano

RJCookeSE
Newbie
Newbie
Posts: 8
Joined: Fri Feb 17, 2012 12:00 am
Contact:

Re: Change line color in a line chart

Post by RJCookeSE » Wed Sep 12, 2012 1:45 am

It looks to me like you cannot reproduce your example chart using a single Line series in the TeeChart. You can make your series' pointers visible and have a condition-based color for each pointer. Alternatively you can use a new Line series for each contiguous stretch of color that you want to display.

Good luck,
Rob Cooke

Osvano
Newbie
Newbie
Posts: 8
Joined: Fri Sep 07, 2012 12:00 am

Re: Change line color in a line chart

Post by Osvano » Thu Sep 13, 2012 8:51 pm

Hello Rob Cooke

First, thank you for ideas.

When you say
"You can make your series' pointers visible and have a condition-based color for each pointer" would be done like this?

You have to send me an example?

I thank your attention,

Osvano.

RJCookeSE
Newbie
Newbie
Posts: 8
Joined: Fri Feb 17, 2012 12:00 am
Contact:

Re: Change line color in a line chart

Post by RJCookeSE » Fri Sep 14, 2012 2:32 am

Something like the code below. This isn't particularly well-documented, but your question was interesting to me so I spent a little time looking through teechart.js to see what was available.

Code: Select all

var Y = [{ array of series values } ];
var X = [{ array of series x-axis values } ];
var c = [{ array of HTML color values, one for each point in the series (ex. "#FF0000" ) } ];

var cht = new Tee.Chart("canvasID");

var srs = new Tee.Line();
srs.data.values = Y;
srs.data.x = X;
srs.palette.colors = c;
srs.colorEach = "yes";
srs.pointer.visible = true;

cht.addSeries(srs);

Post Reply