Vega chart not aligned in the center

[vincent2mots (Vincent Le Roux)]

Hi there!

I'm using a 7.10 version of ES and Kibana.

I try to make a chart using VEGA and text marks.

Here is my code :

{
  $schema: https://vega.github.io/schema/vega-lite/v4.json
  
  // Taille du composant :
  "autosize": "pad",
  
  // Titre du composant :
  title: { 
    "text": "Carte d'identité de l'interface",
    "anchor": "middle"
    "encode": {"title": {"enter": {"fontSize": {"value": "22"}}}}
  }
  
  // Source de données :
  data: {
    url: {
      // Apply dashboard context filters when set
      %context%: true
      // Filter the time picker (upper right corner) with this field
      %timefield%: @timestamp
      // Which index to search
      index: snmp-iftable-1.0.0-2023.06.12
      // Aggregate data by the time field into time buckets, counting the number of documents in each bucket.
      body: {
        "size": 1,
        "_source": ["@timestamp", "host.ip","system.name","host.sous-reseaux", "host.Departement", "host.domain"]
      }
    }
    // On ne veut que les données provenant du tableau hits.hits
    format: {property: "hits.hits"}
  }
  
  // "Transform" : préparation des champs pour la carte d'identité
  transform: [
    {calculate: "'Date : ' + toDate(datum._source['@timestamp'])", "as": "timestamp"},
    {calculate: "'IP : ' + datum._source.host.ip", "as": "host.ip"},
    {calculate: "'Département : ' + datum._source.host.Departement", "as": "host.departement"}
  ]

  // "mark" : l'élement graphique à ajouter
  // "layer" : couches de données que l'on affiche dans la visualisation
  "vconcat": [
   {"mark": "text", "height": 15
    "encoding": {"text": {"field": "host.ip","type": "nominal"}}
   },
   {"mark": "text", "height": 15,
    "encoding": {"text": {"field": "host.departement","type": "nominal"}}
   },
   {"mark": "text", "height": 15,
    "encoding": {"text": {"field": "timestamp","type": "nominal"}}
   }
  ],
  
  // On retire toutes les bordures et on gère l'alignement des textes
  "config": {"view": {"stroke": 0}, "kibana": {"hideWarnings": true},"text":{"align":"left"}},
}

Despite the fact I added and align to the left, the date stay stuck in the middle of the page, as shown bellow :

You can see the middle of the component and the text is currently at the left of the middle... but not at the left of component itself.

I tried a lof a things but nothing seems to work... Have you a better idea?

Best regards!

[Nathan_Reese]

Have you tried setting title.anchor to start? The value middle is centering your title. See vega title docs

[vincent2mots (Vincent Le Roux)]

Hi @Nathan_Reese !

Thanks for you reply!

For the title it's okay : I wanted to center it and it works well. It's about the text mark bellow. If I display the borders, it looks like this :

As you an see, the text is not aligned on the left, as requested. It's precisely at the left of the middle and of the start

Best regards,