# Vega chart not aligned in the center
**URL:** https://discuss.elastic.co/t/vega-chart-not-aligned-in-the-center/336092
**Category:** Kibana
**Tags:** vega
**Created:** [June 15, 2023, 12:18pm UTC](https://discuss.elastic.co/t/vega-chart-not-aligned-in-the-center/336092 "2023-06-15T12:18:22Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@vincent2mots](https://discuss.elastic.co/u/vincent2mots)
#### Post date: [June 15, 2023, 12:18pm UTC](https://discuss.elastic.co/t/vega-chart-not-aligned-in-the-center/336092/1 "2023-06-15T12:18:22Z")
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 :
```auto
{
$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!
---
### Author:  [@Nathan\_Reese](https://discuss.elastic.co/u/Nathan_Reese)
#### Post date: [June 15, 2023, 10:31pm UTC](https://discuss.elastic.co/t/vega-chart-not-aligned-in-the-center/336092/2 "2023-06-15T22:31:23Z")
Have you tried setting `title.anchor` to `start`? The value `middle` is centering your title. See [vega title docs](https://vega.github.io/vega/docs/title/)
---
### Author:  [@vincent2mots](https://discuss.elastic.co/u/vincent2mots)
#### Post date: [June 16, 2023, 7:12am UTC](https://discuss.elastic.co/t/vega-chart-not-aligned-in-the-center/336092/3 "2023-06-16T07:12:16Z")
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,
---
### Author:  [@system](https://discuss.elastic.co/u/system)
#### Post date: [July 14, 2023, 7:12am UTC](https://discuss.elastic.co/t/vega-chart-not-aligned-in-the-center/336092/4 "2023-07-14T07:12:29Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.