V5 JSON Config: add legend for XY Chart

[flaming-cl]

Question

Environment (if applicable)

Additional context

1. How to display legends with XY Chart using JSON Config?
2. How to change the line color using JSON config?

{
  "refs": [
    {
      "data": [
        { "date": 1652425200000, "value1": 92, "value2": 32 },
        { "date": 1652511600000, "value1": 95, "value2": 45 },
        { "date": 1652598000000, "value1": 100, "value2": 20 },
        { "date": 1652684400000, "value1": 100, "value2": 100 },
        { "date": 1652770800000, "value1": 96, "value2": 69 },
        { "date": 1652857200000, "value1": 97, "value2": 90 },
        { "date": 1653894000000, "value1": 94, "value2": 64 }
      ]
    },
    {
      "xAxis": {
        "type": "DateAxis",
        "settings": {
          "maxDeviation": 0.5,
          "baseInterval": {
            "timeUnit": "day",
            "count": 1
          },
          "renderer": {
            "type": "AxisRendererX",
            "settings": {
              "pan": "zoom"
            }
          },
          "tooltip": {
            "type": "Tooltip"
          }
        }
      }
    },
    {
      "yAxis": {
        "type": "ValueAxis",
        "settings": {
          "maxDeviation": 1,
          "renderer": {
            "type": "AxisRendererY",
            "settings": {
              "pan": "zoom"
            }
          }
        }
      }
    }
  ],
  "type": "XYChart",
  "settings": {
    "panX": false,
    "panY": false,
    "wheelX": "panX",
    "wheelY": "zoomX",
    "cursor": {
      "type": "XYCursor",
      "settings": {
        "behavior": "zoomX"
      },
      "properties": {
        "lineY": {
          "settings": {
            "visible": false
          }
        }
      }
    }
  },
  "properties": {
    "xAxes": ["#xAxis"],
    "yAxes": ["#yAxis"],
    "series": [
      {
        "type": "LineSeries",
        "settings": {
          "name": "Series 1",
          "legendLabelText": "Series: {name}",
          "xAxis": "#xAxis",
          "yAxis": "#yAxis",
          "valueYField": "value1",
          "valueXField": "date",
          "tooltip": {
            "type": "Tooltip",
            "settings": {
              "labelText": "{value1}"
            }
          }
        },
        "properties": {
          "data": "#data",
          "bullets": [
            {
              "type": "Bullet",
              "settings": {
                "sprite": {
                  "type": "Circle",
                  "settings": {
                    "radius": 5,
                    "fill": {
                      "type": "Color",
                      "value": "#D29B00"
                    }
                  }
                }
              }
            }
          ]
        }
      },
      {
        "type": "LineSeries",
        "settings": {
          "name": "Series 2",
          "xAxis": "#xAxis",
          "yAxis": "#yAxis",
          "valueYField": "value2",
          "valueXField": "date",
          "legendLabelText": "Series: {name}",
          "tooltip": {
            "type": "Tooltip",
            "settings": {
              "labelText": "{value2}"
            }
          }
        },
        "properties": {
          "data": "#data",
          "bullets": [
            {
              "type": "Bullet",
              "settings": {
                "sprite": {
                  "type": "Circle",
                  "settings": {
                    "radius": 5,
                    "fill": {
                      "type": "Color",
                      "value": "#1B4B7D"
                    }
                  }
                }
              }
            }
          ]
        }
      }
    ]
  },
  "children": [
    {
      "type": "Legend",
      "properties": {
        "data": "#data"
      }
    }
  ]
}

[martynasma]

How to display legends with XY Chart using JSON Config?

There's a demo with legend here: https://www.amcharts.com/docs/v5/concepts/serializing/#XY_chart_with_legend_and_bullets

How to change the line color using JSON config?

Docs on how to set settings on a LineSeries: https://www.amcharts.com/docs/v5/concepts/serializing/#Strokes_and_fills

[flaming-cl]

How to display legends with XY Chart using JSON Config?

There's a demo with legend here: https://www.amcharts.com/docs/v5/concepts/serializing/#XY_chart_with_legend_and_bullets

How to change the line color using JSON config?

Docs on how to set settings on a LineSeries: https://www.amcharts.com/docs/v5/concepts/serializing/#Strokes_and_fills

Hey @martynasma, the above doc for legend doesn't seem to work. JSON config definition for LineSeries and ColumnSeries are different in the above doc. For line series, series is defined in properties, and for ColumnSeries, it's under refs.

Our team paid for Amchart V4 licenses for all of our projects. We are considering using Amchart 5, but it's kind of frustrating the JSON config docs are not there for V5 like V4 has.

Do you know when the V5 docs will have JSON config def like V4? Many thanks!

[martynasma]

Can you clarify what you mean by legend doesn't work? I just doublechecked the demo I linked to and it displays the legend.

Do you know when the V5 docs will have JSON config def like V4? Many thanks!

amCharts 5 has partial support for JSON support. It's used for serializing basic stuff. At this time we do not plan on implementing JSON support for 100% of use cases, I'm afraid.

[flaming-cl]

Can you clarify what you mean by legend doesn't work? I just doublechecked the demo I linked to and it displays the legend.

Do you know when the V5 docs will have JSON config def like V4? Many thanks!

amCharts 5 has partial support for JSON support. It's used for serializing basic stuff. At this time we do not plan on implementing JSON support for 100% of use cases, I'm afraid.

https://codepen.io/team/amcharts/pen/bGjLjxM https://codepen.io/team/amcharts/pen/BaGdRzV

If opening these 2 Codepen links, you will find LineSeries and ColumnSeries are using different ways of definition. LineSeries doesn't have series as refs but uses properties in the official example, meaning we have to switch to the way that ColumnSeries defines series to get the legend work.

We are wondering why not following the same way to define the charts.

Btw, thanks so much for giving us the supports. Love this library you guys created!

[martynasma]

Well, whatever object needs to be referred by something else, needs to go into refs.

Since series need to be referenced in legend, that's why series goes into refs. Otherwise there's no need to add series there.

I hope that makes sense.