HighChart issue with NULL Values

Q&A
,
1

Hi Team I hope you guys doing well

I have the the below dataset:

Product Code PRODUCT_LINE Target
FDA-MNB TV 55.03
LKJ TV 64.4
SAF-HYT TV 80.9
FDS SV 72.2
LMN-TRE SV 91.1
FDA-MNB SV 99.3
SAF-HYT SV 65.4

I created a highchart with the below code:

{
“xAxis”: {
“categories”: [“unique”,[“getColumn”, 0]]
},
“yAxis”: {
“min”: 0,
“max”: 100,
“labels”: {
“format”: “{value}%”
},
“title”: {
“text”: “”
},
“plotBands”: [
{
“from”: 0,
“to”: 50,
“color”: “rgba(255, 140, 140)”
},
{
“from”: 50,
“to”: 80,
“color”: “rgba(242, 221, 145)”
},
{
“from”: 80,
“to”: 100,
“color”: “rgba(177, 214, 167)”
}
]
},
“tooltip”: {
“pointFormat”: “{series.name}: {point.y:.2f}%”
},
“series”:
[
“map”,
[
“unique”,[“getColumn”,1]],
{
“type”: “line”,
“name”:[“item”],
“data”:
[
“filter”,
[“getColumn”,0,2,1],
[“==”,[“get”,[“item”],2],[“item”,2]]
],
“showInLegend”: true,
“lineWidth”: 4,
“color”: “#386069”,
“marker”:
{
// “symbol”: “circle”,
“enabled”: true,
“radius”: 22,
“lineColor”: “#386069”,
“lineWidth”: 3,
“fillColor”: “#c1d2d6”
},
“dataLabels”:
{
“enabled”: true,
“format”: “{point.y:.0f}%”,
“align”: “center”,
“verticalAlign”: “middle”,
“style”:
{
“color”: “#386069”,
“fontSize”: “15”,
“textOutline”: “none” // Remove text outline
}
}
}
]
}

As shown in the below screenshot The data has 5 Product Code points in the table however in the graph you can only see 4 for some reason:

image
image1907×611 66.3 KB

I would like a way to show the data even if all the numbers are not available. But would like to achieve this using high charts because we need to have the back ground colour

Is there anyway this can be achieved?

2

Here is code that will address missing datapoint for specific x-axis category for a serie:

{
  "xAxis": {
    "categories": ["unique", ["getColumn", 0]]
  },
  "yAxis": {
    "min": 0,
    "max": 100,
    "labels": {
      "format": "{value}%"
    },
    "title": {
      "text": ""
    },
    "plotBands": [
      {
        "from": 0,
        "to": 50,
        "color": "rgba(255, 140, 140)"
      },
      {
        "from": 50,
        "to": 80,
        "color": "rgba(242, 221, 145)"
      },
      {
        "from": 80,
        "to": 100,
        "color": "rgba(177, 214, 167)"
      }
    ]
  },
  "series": [
    "map",
    ["unique", ["getColumn", 1]], // iterate through each series
    {
      "name": ["item"],
      "data": [
        "map",
        ["unique", ["getColumn", 0]], // iterate over each x-axis categories
        [
          "map",
          // filter the records down to only ones that is in the current series and x-axis category
          // for the missing data point, it will return an empty record []
          // for all other data points, it will return [series, x-axis category, metric value]
          [
            "filter",
            ["getColumn", 0, 1, 2],
            [
              "&&",
              ["==", ["get", ["item"], 1], ["item", 3]], // series matches
              ["==", ["get", ["item"], 0], ["item", 2]] // x-axis category matches
              // Note: ["item"] is the same as ["item", 1] which is the item in the 1st closest iteration of the closest map call
              // ["item", 2] is the item in the 2nd closest map call above e.g. the one iterating over x-axis categories (Line 39)
              // ["item", 3] is the item in the 3rd closest map call above e.g. the one iterating over series categories (Line 34)
            ]
          ],
          // Ultimately you will be mapping over [[series, x-axis category, metric value], [], [series, x-axis category, metric value]...]
          // we want to take the index 2 of each, i.e. [metric value]
          ["get", ["item"], 2]
        ]
      ],
      "lineWidth": 4,
      "color": "#386069",
      "marker": {
        // "symbol": "circle",
        "enabled": true,
        "radius": 22,
        "lineColor": "#386069",
        "lineWidth": 3,
        "fillColor": "#c1d2d6"
      },
      "dataLabels": {
        "enabled": true,
        "format": "{point.y:.0f}%",
        "align": "center",
        "verticalAlign": "middle",
        "style": {
          "color": "#386069",
          "fontSize": "15",
          "textOutline": "none" // Remove text outline
        }
      }
    }
  ],
  "plotOptions": {
    "series": {
      "connectNulls": true // Set to true to connect the line across null points
    }
  }
}

If you wanted to have the line broken when there is null change the connectNulls to false

Radar Chart Highchart
3

Hi @QSCommunity1,
It’s been awhile since we last heard from you, did you have any additional questions regarding your post?

If we do not hear back within the next 3 business days, I’ll close out this topic.

Thank you!

4

Hi @QSCommunity1,
Since we have not heard back, I’ll go ahead and close out this topic. However if you have any additional questions, feel free to create a new post in the community and link this discussion for relevant information if needed.

Thank you!