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

[yk.kim]

I would like to inquire about how to apply a legend to a ColorGrid chart as shown in the attached image.
thank you.

[Yeray]

Hello,

Have you tried the TLegendPaletteTool?
Here a simple example:

Code: Select all

uses Chart, TeeSurfa, TeeLegendPalette;

var Chart1: TChart;

procedure TForm1.FormCreate(Sender: TObject);
begin
  Chart1:=TChart.Create(Self);

  with Chart1 do
  begin
    Parent:=Self;
    Align:=alClient;
    Color:=clWhite;
    Gradient.Visible:=False;
    Walls.Back.Color:=clWhite;
    Walls.Back.Gradient.Visible:=False;
    Legend.Hide;
    View3D:=False;
    MarginBottom:=10;

    AddSeries(TColorGridSeries).FillSampleValues;

    Draw;

    with TLegendPaletteTool(Tools.Add(TLegendPaletteTool)) do
    begin
      Series:=Chart1[0];
      Vertical:=False;
      Width:=Chart1.Width;
      Height:=40;
      Top:=Chart1.Axes.Bottom.PosAxis+25;
      Axis:=laDefault;
    end;
  end;
end;

horiz_legendpalette.png (16.09 KiB) Viewed 19449 times

[yk.kim]

Does the TLegendPaletteTool presented above exist in the javascript library?
I would like to inquire about how to implement the above example using Javascript.

[Yeray]

Hello,

Oups sorry for the confusion! I'll take a look at the js library.

[Yeray]

Hello,

I see you asked something very similar a few months ago.
https://www.steema.com/support/viewtopi ... 18&t=18141
Weren't you able to make it work?

The only difference I see is in the alignment of the legend. Am I missing anything else?

[yk.kim]

https://www.steema.com/support/viewtopi ... 18&t=18141

I would like to contact you because the legend does not display the way
I want even if I change the position of the legend to "bottom" in the source link above.

[Yeray]

Hello,

You could try adding a second chart at the bottom and use it to draw the legend. Ie:
https://jsfiddle.net/norike82/7aj5p9of/

colorGridLegend.png (47.05 KiB) Viewed 17303 times

[yk.kim]

Hello,

You could try adding a second chart at the bottom and use it to draw the legend. Ie:
https://jsfiddle.net/norike82/7aj5p9of/

colorGridLegend.png

Thank you for suggesting a solution.