XYChart series tooltip background color not working

Ignition
,
1

Hi, I have a couple line series with tooltips on the bullets, although changing the background color doesn't seem to work, I only can get the grey default color. I pasted the entire series for reference in this post, not sure if something else if affecting it. I noticed that if the series tooltip is disabled then so is the bullet tooltip, so maybe they're related but any help would be appreciated. I also seem to only be having this issue with line type series. Thank you.

image
image

{
  "name": "safetystock",
  "label": {
    "text": "Safety Stock"
  },
  "visible": true,
  "hiddenInLegend": true,
  "defaultState": {
    "visible": true
  },
  "data": {
    "source": "chart_Data",
    "x": "date",
    "y": "safetystock"
  },
  "xAxis": "time",
  "yAxis": "pieces",
  "zIndex": 0,
  "tooltip": {
    "enabled": true,
    "text": "{name}: [bold]{shipped}[/]",
    "cornerRadius": 3,
    "pointerLength": 4,
    "background": {
      "color": "",
      "opacity": 1
    }
  },
  "render": "line",
  "candlestick": {
    "open": {
      "x": "",
      "y": ""
    },
    "high": {
      "x": "",
      "y": ""
    },
    "low": {
      "x": "",
      "y": ""
    },
    "appearance": {
      "fill": {
        "color": "",
        "opacity": 1
      },
      "stroke": {
        "color": "",
        "opacity": 1,
        "width": 1
      },
      "stacked": false,
      "deriveFieldsFromData": {
        "fill": {
          "color": "",
          "opacity": ""
        },
        "stroke": {
          "color": "",
          "opacity": "",
          "width": ""
        }
      },
      "heatRules": {
        "enabled": false,
        "max": "",
        "min": "",
        "dataField": ""
      }
    }
  },
  "column": {
    "open": {
      "x": "",
      "y": ""
    },
    "appearance": {
      "fill": {
        "color": "",
        "opacity": 1
      },
      "stroke": {
        "color": "",
        "opacity": 1,
        "width": 1
      },
      "width": null,
      "height": null,
      "stacked": false,
      "deriveFieldsFromData": {
        "fill": {
          "color": "",
          "opacity": ""
        },
        "stroke": {
          "color": "",
          "opacity": "",
          "width": ""
        }
      },
      "heatRules": {
        "enabled": false,
        "max": "",
        "min": "",
        "dataField": ""
      }
    }
  },
  "line": {
    "open": {
      "x": "",
      "y": ""
    },
    "appearance": {
      "connect": true,
      "tensionX": 1,
      "tensionY": 1,
      "minDistance": 0.5,
      "stroke": {
        "width": 2,
        "opacity": 0.8,
        "color": "#7a5cce",
        "dashArray": 3
      },
      "fill": {
        "color": "",
        "opacity": 0
      },
      "bullets": [
        {
          "enabled": true,
          "render": "circle",
          "width": 10,
          "height": 10,
          "label": {
            "text": "",
            "position": {
              "dx": 0,
              "dy": 0
            }
          },
          "tooltip": {
            "enabled": true,
            "text": "{name}: [bold]{safetystock}[/]",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "#7A5CCE",
              "opacity": 1
            }
          },
          "fill": {
            "color": "#C0C0C0",
            "opacity": 0
          },
          "stroke": {
            "color": "#C0C0C0",
            "width": 1,
            "opacity": 0
          },
          "rotation": 0,
          "deriveFieldsFromData": {
            "fill": {
              "color": "",
              "opacity": ""
            },
            "stroke": {
              "color": "",
              "opacity": "",
              "width": ""
            },
            "rotation": ""
          },
          "heatRules": {
            "enabled": false,
            "max": 100,
            "min": 2,
            "dataField": ""
          }
        }
      ]
    }
  },
  "stepLine": {
    "open": {
      "x": "",
      "y": ""
    },
    "appearance": {
      "connect": true,
      "tensionX": 1,
      "tensionY": 1,
      "minDistance": 0.5,
      "stroke": {
        "width": 3,
        "opacity": 1,
        "color": "",
        "dashArray": ""
      },
      "fill": {
        "color": "",
        "opacity": 0
      },
      "bullets": [
        {
          "enabled": true,
          "render": "circle",
          "width": 10,
          "height": 10,
          "label": {
            "text": "{value}",
            "position": {
              "dx": 0,
              "dy": 0
            }
          },
          "tooltip": {
            "enabled": true,
            "text": "{name}: [bold]{valueY}[/]",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "fill": {
            "color": "",
            "opacity": 1
          },
          "stroke": {
            "color": "",
            "width": 1,
            "opacity": 1
          },
          "rotation": 0,
          "deriveFieldsFromData": {
            "fill": {
              "color": "",
              "opacity": ""
            },
            "stroke": {
              "color": "",
              "opacity": "",
              "width": ""
            },
            "rotation": ""
          },
          "heatRules": {
            "enabled": false,
            "max": 100,
            "min": 2,
            "dataField": ""
          }
        }
      ]
    }
  }
}
1 Like
2

Have you found a solution? Mine is worst, I am running 8.1.42, and the tooltip backgrounds are random colors, not even gray. I would like them to be the same color as the lines. They are very confusing now.

3

Post your XY Chart component's JSON here formatted as code. (See Wiki - how to post code on this forum for tips on how to format and use "Hide Details".)

If the dataSources are from a binding we won't be able to generate the data so you'll need to copy and paste that separately.

4

Both exceed the 32000 characters max limit here. :woozy_face:

5

I think you can zip them and upload. We only need a few records from the dataset.

6

Here are the xychart json and dataset.
xychart.zip (7.9 KB)

7

A quick look and I've reproduced the problem on the Xbar plot. (I haven't got the others to show up yet.)
Bedtime in Ireland, I'm afraid.

1 Like
8

Set line.appearance.bullets[x].fill.color value.

1 Like
9

That is it, thank you! It works perfectly. I guess tooltip.background.color is not the place to set the tooltip's background color somehow.

10

It's a bug in the chart.
Everyone tries to set that property because tooltip.background.color explicitly describes it.

1 Like