Change color one specific line on Map

[hiimnhan]

Question

I want to change color of one line that I want.
Initially, I set line color via template

    lineSeries.mapLines.template.setAll({
      stroke: am5.color("#15803d"),
      strokeWidth: 4,
      strokeOpacity: 0.6,
    });

It works fine. However, I want to change color of one line to another color

 lineSeries.pushDataItem({
            id: "id1",
            geometry: {
              type: "LineString",
              coordinates: [
                [
                  sourceDataItem.get("longitude") as number,
                  sourceDataItem.get("latitude") as number,
                ],
                [
                  targetDataItem.get("longitude") as number,
                  targetDataItem.get("latitude") as number,
                ],
              ],
            },
            mapLine: am5map.MapLine.new(root, {
              stroke: am5.color("#f1f1f1"),
              strokeWidth: 4,
              strokeOpacity: 0.6,
            }),
          });

I tried to set that via mapLine property but the line disappears instead of changing color

[martynasma]

You can do that via templateField property:
https://www.amcharts.com/docs/v5/concepts/settings/template-fields/

lineSeries.mapLines.template.setAll({
      stroke: am5.color("#15803d"),
      strokeWidth: 4,
      strokeOpacity: 0.6,
      templateField: "lineSettings"
});

Data:

lineSeries.pushDataItem({
  id: "id1",
  geometry: {
    type: "LineString",
    coordinates: [
      [
        sourceDataItem.get("longitude") as number,
        sourceDataItem.get("latitude") as number,
      ],
      [
        targetDataItem.get("longitude") as number,
        targetDataItem.get("latitude") as number,
      ],
    ],
  },
  lineSettings: {
    stroke: am5.color("#f1f1f1"),
    strokeWidth: 4,
    strokeOpacity: 0.6,
  }
});

[hiimnhan]

seem like it doesn't work. And there is a TS issue with key not exist in class IMapLineSeriesDataItem

[martynasma]

My bad. Sorry.

The parameter for pushDataItem() is a data item settings, not data context, hence it not working.

We're adding a second parameter pushDataItem() for passing in data context in the next version, so you will be able to do this:

lineSeries.pushDataItem({
  id: "id1",
  geometry: {
    type: "LineString",
    coordinates: [
      [
        sourceDataItem.get("longitude") as number,
        sourceDataItem.get("latitude") as number,
      ],
      [
        targetDataItem.get("longitude") as number,
        targetDataItem.get("latitude") as number,
      ],
    ],
  },
}, {
  lineSettings: {
    stroke: am5.color("#f1f1f1"),
    strokeWidth: 4,
    strokeOpacity: 0.6,
  }
});

We will notify you here when the new version is out. Possible later this week.

[martynasma]

Fixed in 5.10.0.

[5.10.0] - 2024-07-22

Added

• A second parameter (dataContext) added to Component's methods pushDataItem and makeDataItem, allowing to pass in a data context object related to the data item.
• New class PatternSet added. Allows serving patterns similarly to ColorSet. More info.
• New setting patterns added to Hierarchy, PercentSeries, Venn, SerialChart, FlowNodes. More info.
• New setting fillPattern added to IFlowNodesDataItem, IHierarchyDataItem, IPercentSeriesDataItem, IVennDataItem, ISeriesSettings.

Fixed

• LinkedHierarchy nodes were not clickable when children were added using addChildData() method.
• If there were no nodes at topLevel in Hierarchy chart, it would show nodes from upper levels.
• Not all event listeners were disposed when disposing a ChartIndicator. This could cause a memory leak.
• Sprite's hover()/unhover() methods now check if the Sprite is not disposed. This fixes some potential errors when disposed items are being referenced.
• Adding in explicit d3 dependencies (Issue 1567)
• DurationFormatter was not rounding fractional numbers properly in some cases.

Full change log.

Download options.

Make sure you clear your browser cache after upgrading. And feel free to contact us again if you are still experiencing this issue.