Clip function in Vega Lite (Deneb) doesn't work

[ruslan88990]

Hello everyone, with the help of Deneb I created a Gantt chart with labels for each task and added the “Clip - true” property. The problem is that when zooming out, the description that does not fit into the bar does not disappear as intended. If it’s not difficult for you, look through my code and tell me what can be done in this situation and where I made a mistake. Thank you.

{
  "data": {"name": "dataset"},
  "layer": [
    { 
      "layer":[
        {
              "mark": {
            "type": "bar",
            "cornerRadius": 3,
            "tooltip": true,
            "opacity": 0.6,
            "stroke": "black",
            "cursor": "pointer"
          },
          "encoding":{
 
                "color": {
                  "field": "Type of Activity",
                  "type": "nominal",
                  "legend": {
                    "interactive": true
                  }
                }
          },
          "params": [
            {
              "name": "highlight",
              "select": {
                "type": "point",
                "on": "mouseover"
              }
            },
            {
              "name": "select",
              "select": "point"
            },
            {
              "name": "grid",
              "select": "interval",
              "bind": "scales"
            },                  
            {
              "mark": {
                "type": "text",
                "clip":"true",
                "align": "left",
                "dx": 5
              },
              "encoding": {
                "text": {
                  "field": "Type of Activity",
                  "type": "nominal",
                  "bandPosition": 0.5
                }
                }

            }
          ]
        },
            {
        "mark": {
          "type": "text",
          "align": "left",
          "dx": 5
        },
        "encoding": {
          "text": {
            "field": "Type of A tivity",
            "type": "nominal",
            "bandPosition": 0.5
            , "clip": true
          }
        }
      }
        ],

      "encoding": {
        "x": {
          "field": "Activity Start",
          "type": "temporal",
          "title": "",
          "timeUnit": "binnedayshoursminutesseconds",
          "grid": true,
          "axis": {
            "format": "%d.%m.%Y %H:%M:%S"
          }
        },
        "x2": {
          "field": "Activity end",
          "type": "temporal",
          "timeUnit": "binnedayshoursminutesseconds",
          "axis": {
            "labelFontWeight": "bold",
            "format": "%d.%m.%Y %H:%M:%S"
          }
        },
        "y": {
          "field": "Area",
          "type": "nominal",
          "title": "",
          "axis": {
            "labelFontWeight": "bold",
            "grid": true,
            "tickBand": "extent"
          },
          "gridDash": [1, 1]
        },
        "fillOpacity": {
          "condition": {
            "param": "select",
            "value": 1
          },
          "value": 0.3
        },
        "strokeWidth": {
          "condition": [
            {
              "param": "select",
              "empty": false,
              "value": 2
            },
            {
              "param": "highlight",
              "empty": false,
              "value": 1
            }
          ],
          "value": 0.5
        }
      }
    }
  ],
  "config": {
    "scale": {"bandPaddingInner": 0.5}
  }
}

[Anonymous]

Hi @ruslan88990 ,

Here are a few steps you can take to troubleshoot and potentially resolve the issue:

Ensure Correct Placement of "Clip" Property: The "clip" property should be directly within the mark definition to ensure it's applied correctly. For example, for the text mark, it should look like this:
"mark": {
"type": "text",
"clip": true,
"align": "left",
"dx": 5
}

It seems you've done this correctly in one part of your code, but please ensure that it's consistently applied wherever you expect clipping behavior.

Review the Scope of Clipping: Understand that clipping in Vega Lite will prevent marks from being drawn outside the axis range of the plot area. If your text labels are extending beyond the bars due to their length and the zoom level, you might need to adjust the text properties (e.g., font size) or the chart's layout to ensure that the text fits within the bars as intended.

Consider Alternative Approaches: If the clipping behavior doesn't achieve the desired effect, you might want to consider alternative approaches to handling overflow text, such as adjusting the text alignment, changing the text size dynamically based on the zoom level, or using interactive tooltips to display the full text upon hover instead of always showing it.

For more detailed information on mark properties and customization in Vega Lite, you can refer to the Vega Lite documentation on Marks: Mark | Vega-Lite

Best regards,
Community Support Team_Binbin Yu
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

[ruslan88990]

Hi, thanks for the reply. I tried the solution you suggested, but unfortunately I did not get the desired result.