Left Axis as Table in Highcharts xrange

Q&A
, ,
1

I am trying to create a Highcharts Gantt chart with the left axis as table. It is almost complete but I have a formatting issue within the table. Excess commas are showing and I believe it is due to how the columns are concatenated. Commas appear before and after the text in each column and a comma between each row.

Does anyone have insight into how the code can be written to remove the commas?

Left Axis as Table Highchart

image
image667×148 4.56 KB

2

Hi @jausderau and welcome to the Quick Community!

Those commas are showing up because your map body is returning a bare array of strings and expressions rather than a single concatenated string. When the first element of the array is a string literal (not an operator like "+" or "map"), the JLE treats it as a literal array — and when Highcharts renders the label, JavaScript’s .toString() joins all the elements with commas. That’s what you’re seeing.

The fix is to wrap your HTML fragments in nested "+" operators so each category resolves to one string instead of an array. Here’s the full corrected chart code:

{
  "chart": {
    "type": "xrange",
    "marginLeft": 400
  },
  "title": {
    "text": "Contract Timeline by Manager"
  },
  "xAxis": {
    "type": "datetime",
    "labels": {
      "format": "{value:%b %Y}"
    },
    "plotLines": [
      {
        "value": ["get", ["getColumn", 5], 0],
        "color": "#DF5353",
        "dashStyle": "Dash",
        "width": 2,
        "zIndex": 5,
        "label": {
          "text": "Today",
          "align": "right",
          "style": {
            "color": "#DF5353",
            "fontWeight": "bold"
          }
        }
      }
    ]
  },
  "yAxis": {
    "title": {
      "text": null
    },
    "categories": [
      "map",
      ["getColumn", 1],
      ["+",
        ["+",
          ["+",
            ["+",
              ["+",
                ["+",
                  ["+",
                    "<table style='width:400px; border-collapse:collapse; border:1px solid #ddd; padding:0px; font-size:0px;'><tr><td style='border:1px solid #dddddd; padding:0px; width:40%; font-size:9px'>",
                    ["get", ["getColumn", 0], ["indexOf", ["getColumn", 1], ["item"]]]
                  ],
                  "</td><td style='border:1px solid #ddd; padding:4px; width:35%; font-size:9px'>"
                ],
                ["item"]
              ],
              "</td><td style='border:1px solid #ddd; padding:4px; width:25%; font-size:9px'>"
            ],
            ["get", ["getColumn", 2], ["indexOf", ["getColumn", 1], ["item"]]]
          ],
          "</td>"
        ],
        "</tr></table>"
      ]
    ],
    "reversed": true,
    "gridLineWidth": 1,
    "labels": {
      "useHTML": true,
      "style": {
        "width": "380px"
      }
    }
  },
  "colors": ["#2A5D78", "#F6AA54", "#8EC0F9", "#79F028", "#33AEB1", "#4D5BA8", "#87BC45"],
  "legend": {
    "enabled": true,
    "title": {
      "text": "Contract Manager"
    },
    "align": "center",
    "verticalAlign": "bottom",
    "layout": "horizontal",
    "symbolHeight": 12,
    "symbolWidth": 16,
    "symbolRadius": 2
  },
  "series": [
    "map",
    ["unique", ["getColumn", 2]],
    {
      "name": ["item"],
      "type": "xrange",
      "borderRadius": 3,
      "pointWidth": 15,
      "showInLegend": true,
      "marker": {
        "symbol": "square"
      },
      "data": [
        "map",
        [
          "filter",
          ["getColumn", 1, 0, 2, 3, 4],
          ["==", ["get", ["item"], 2], ["item", 2]]
        ],
        {
          "name": ["get", ["item"], 1],
          "contractNumber": ["get", ["item"], 0],
          "manager": ["get", ["item"], 2],
          "x": ["get", ["item"], 3],
          "x2": ["get", ["item"], 4],
          "y": ["indexOf", ["getColumn", 1], ["get", ["item"], 0]],
          "color": ["get", ["#2A5D78", "#F6AA54", "#8EC0F9", "#79F028", "#33AEB1", "#4D5BA8", "#87BC45"], ["indexOf", ["unique", ["getColumn", 2]], ["get", ["item"], 2]]]
        }
      ]
    }
  ],
  "tooltip": {
    "useHTML": true,
    "format": "<b>{point.name}</b><br/>Contract #: {point.contractNumber}<br/>Manager: {point.manager}<br/>Start: {point.x:%b %d, %Y}<br/>End: {point.x2:%b %d, %Y}"
  }
}

Also make sure to include the </td> closing tags (they were commented out in your original) since you have useHTML: true, so proper table markup will render cleaner.

Hope this helps!

3

@JacobR Thank you for the quick response. The solution worked perfectly.
I tried many other solutions but none worked as clean as this. Thanks again