Vega chart not aligned in the center

Elastic Stack Kibana
1

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 :

vega
vega1184×465 27.3 KB

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!

2

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

3

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 :

vega2
vega2817×175 11.1 KB

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,