Customize the Axis labels with SVG/HTML

[Marttyn]

Hi,
I'm trying to create a bar chart similar to the one in the image below:

I want to add country flags alongside the y-axis labels, but I’ve run into a couple of issues. I’m using React, and I have access to a library of flags in SVG format. However, it seems like the y-axis labels in the data array only accept strings, not SVG elements or React components.

I’ve also tried using emoji flags (e.g., 🇧🇷 using this method: Emojipedia), but the flags don’t render correctly.

function getFlagEmoji(countryCode: string) {
  let codePoints = countryCode
    .toUpperCase()
    .split("")
    .map((char) => 127397 + char.charCodeAt(0));
  return String.fromCodePoint(...codePoints);
}

What would be the best way to include SVG flags in the y-axis labels? Is there a workaround for this limitation?

Thanks in advance!

[Fil]

Using emojis should work:

const codes = new Map([
  ["Argentina", "AR"],
  ["Bolivia", "BO"],
  ["Chile", "CL"],
  ["Brazil", "BR"]
]);

function getFlagEmoji(c) {
  const countryCode = codes.get(c) ?? c;
  let codePoints = countryCode
    .toUpperCase()
    .split("")
    .map((char) => 127397 + char.charCodeAt(0));
  return String.fromCodePoint(...codePoints);
}

Plot.barX(
  [
    [1, "Argentina"],
    [2, "Brazil"],
    [3, "Chile"],
    [3, "Bolivia"]
  ],
  { x: "0", y: "1" }
).plot({ marginLeft: 100, y: { tickFormat: (d) => `${getFlagEmoji(d)} ${d}` } })

But I agree it could be nice to accept a SVG node as the output of the tickFormat function.

[Marttyn]

For me it doesn't work, I tried in Chrome and Edge

EDIT: I opened on my phone and it did work. I don't know why this difference.

[Fil]

mhhh ok, maybe windows vs linux vs macos? (I've tested on macos only)

[Marttyn]

You are right, I tested on Mac and Android and it did work.
Looks like Windows doesn't support flag emoji.
https://answers.microsoft.com/en-us/windows/forum/all/country-emoji-for-windows/78a3e92b-02a8-4e7c-814e-c1c0596eaf4e

So unfortunately, flag emoji is not a good solution for me, as I need Windows support too.

[Fil]

Maybe try the image mark? Once you know the list of countries, you can use Plot.image() with frameAnchor: "left", y being the country name, and src being the URI of the flag svg (can be a data-uri).

Also, I think we should create a general feature request concerning both the text and the tip marks. (The axis marks use the text mark internally to render the ticks labels). Because we often want to extend these marks to render as custom svg or even HTML nodes. Ref. #1767 for the tip use case.

[Marttyn]

I found a solution for the emoji flags here: https://stackoverflow.com/questions/62729729/how-do-i-view-country-flags-on-windows-10-through-html

Using the font Noto Emoji works on windows too.
or from Google: https://fonts.google.com/noto/specimen/Noto+Color+Emoji