Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Don't miss out! 2025 Microsoft Fabric Community Conference, March 31 - April 2, Las Vegas, Nevada. Use code MSCUST for a $150 discount. Prices go up February 11th. Register now.

Reply
ruslan88990
Frequent Visitor

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

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.

ruslan88990_1-1711974685407.png

 

{
  "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}
  }
}

 

 

 

 

2 REPLIES 2
Anonymous
Not applicable

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.

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

Helpful resources

Announcements
Las Vegas 2025

Join us at the Microsoft Fabric Community Conference

March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount! Prices go up Feb. 11th.

Feb2025 Sticker Challenge

Join our Community Sticker Challenge 2025

If you love stickers, then you will definitely want to check out our Community Sticker Challenge!

Jan NL Carousel

Fabric Community Update - January 2025

Find out what's new and trending in the Fabric community.