HighChart issue with NULL Values

Question & Answer
,
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