I would like to inquire about how to apply a legend to a ColorGrid chart.

TeeChart for JavaScript for the HTML5 Canvas
Post Reply
yk.kim
Newbie
Newbie
Posts: 8
Joined: Mon Mar 18, 2024 12:00 am

I would like to inquire about how to apply a legend to a ColorGrid chart.

Post by yk.kim » Fri Apr 12, 2024 12:34 am

I would like to inquire about how to apply a legend to a ColorGrid chart as shown in the attached image.
thank you.
Attachments
legend.png
legend.png (267.86 KiB) Viewed 12529 times

Yeray
Site Admin
Site Admin
Posts: 9613
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: I would like to inquire about how to apply a legend to a ColorGrid chart.

Post by Yeray » Tue Apr 16, 2024 8:03 am

Hello,

The simplest way could be adding a dummy Line series to draw those items in the legend.
Add the Line series before adding the ColorGrid:

Code: Select all

  var line = Chart1.addSeries(new Tee.Line());
  line.data.values = [1200, 1150, 1100, 1050, 1000, 950, 900];
  line.colorEach = "yes";
Tune the legend and the left axis:

Code: Select all

  Chart1.legend.legendStyle="values";
  Chart1.legend.symbol.height = 18;
  Chart1.legend.symbol.format.stroke.fill = "";
  Chart1.axes.left.setMinMax(0, 100);
Use the warm palette:

Code: Select all

Chart1.applyPalette("warm");
firefox_hi5roHNNQI.png
firefox_hi5roHNNQI.png (5.81 KiB) Viewed 12444 times
The alternative would be to draw the legend manually.
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