# Vega plugin:Changing color and size of the labels

**URL:** https://discuss.elastic.co/t/vega-plugin-changing-color-and-size-of-the-labels/128847
**Category:** Kibana
**Created:** [April 20, 2018, 9:58am UTC](https://discuss.elastic.co/t/vega-plugin-changing-color-and-size-of-the-labels/128847 "2018-04-20T09:58:48Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![KibanaUse](https://avatars.discourse-cdn.com/v4/letter/k/e9c0ed/32.png) [@KibanaUse](https://discuss.elastic.co/u/KibanaUse)
#### Post date: [April 20, 2018, 9:58am UTC](https://discuss.elastic.co/t/vega-plugin-changing-color-and-size-of-the-labels/128847/1 "2018-04-20T09:58:48Z")

</div>

Hello,

Is it possible to change the laben size and/or color? I am using Vega plugin.  
Here is the screenshot of my diagram.

 ![traf%20lights](https://us1.discourse-cdn.com/elastic/original/3X/f/f/ff3177fd05ebb1c3915bece0522a4bdd8017058c.png)

and the query is

{  
"$schema": "[https://vega.github.io/schema/vega-lite/v2.json](https://vega.github.io/schema/vega-lite/v2.json)",  
"description": "A bar chart that directly encodes color names in the data.",  
"data": {  
"values": [  
{"customer":"A", "@timestamp": 7, "state": "red"},  
{"customer":"A", "@timestamp": 5, "state": "green"},  
{"customer":"B", "@timestamp": 6, "state": "green"},  
{"customer":"B", "@timestamp": 4, "state": "red"},  
{"customer":"B", "@timestamp": 3, "state": "green"},  
{"customer":"C", "@timestamp": 2, "state": "green"},  
{"customer":"C", "@timestamp": 1, "state": " yellow"}  
]  
},  
"transform": [  
{  
"filter": {"field": "state", "oneOf":["red", "green"]}  
}  
],  
"mark": "bar",  
"encoding": {  
"y": {  
"field": "state",  
"type": "nominal"  
},  
"x": {  
"aggregate": "count",  
"field": "@timestamp",  
"type": "quantitative"  
},  
"color": {  
"field": "state",  
"type": "nominal",  
"scale": null  
}  
}  
}

---

<div class="post-metadata">

### Author: ![Nathan\_Reese](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nathan_reese/32/84829_2.png) [@Nathan\_Reese](https://discuss.elastic.co/u/Nathan_Reese)
#### Post date: [April 20, 2018, 3:16pm UTC](https://discuss.elastic.co/t/vega-plugin-changing-color-and-size-of-the-labels/128847/2 "2018-04-20T15:16:19Z")

</div>

Below is your vega example updated to specify axis label color and axis label font size. I found these at [https://vega.github.io/vega-lite/docs/axis.html#labels-config](https://vega.github.io/vega-lite/docs/axis.html#labels-config)

```auto
{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "description": "A bar chart that directly encodes color names in the data.",
  "data": {
    "values": [
      {"customer":"A", "@timestamp": 7, "state": "red"},
      {"customer":"A", "@timestamp": 5, "state": "green"},
      {"customer":"B", "@timestamp": 6, "state": "green"},
      {"customer":"B", "@timestamp": 4, "state": "red"},
      {"customer":"B", "@timestamp": 3, "state": "green"},
      {"customer":"C", "@timestamp": 2, "state": "green"},
      {"customer":"C", "@timestamp": 1, "state": " yellow"}
    ]
  },
  "config": {
    "axis": {
      "labelColor":"red",
      "labelFontSize":16
    }
  },
  "transform": [
    {
    "filter": {"field": "state", "oneOf":["red", "green"]}
    }
  ],
  "mark": "bar",
  "encoding": {
    "y": {
      "field": "state",
      "type": "nominal"
    },
    "x": {
      "aggregate": "count",
      "field": "@timestamp",
      "type": "quantitative",
    },
    "color": {
      "field": "state",
      "type": "nominal",
      "scale": null
    }
  }
}

```

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)
#### Post date: [May 18, 2018, 3:16pm UTC](https://discuss.elastic.co/t/vega-plugin-changing-color-and-size-of-the-labels/128847/3 "2018-05-18T15:16:22Z")

</div>

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