Vega chart not aligned in the center

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 :

  // 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","","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 : ' +", "as": "host.ip"},
    {calculate: "'Département : ' +", "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!

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

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,

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.