CODEWITHSUNDEEP
chartsvegavega-lite
Dima Pog
Dima Pog

Reputation: 21

VEGA CHART individual bar color

i whant to make every bar in chart - in different collor. please help.

so default chart like described in docs: https://vega.github.io/vega/examples/bar-chart/

for example - i whant to make like: blue, red, yellow, green, blue, blue.

please help! thanks!

Upvotes: 1

Views: 2810

Answers (4)

Vineet Gandhi
Vineet Gandhi

Reputation: 103

For bar charts

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A bar chart that directly encodes color names in the data.",
  "data": {
    "values": [
      {
        "color": "yellow",
        "b": 28
      },
      {
        "color": "green",
        "b": 55
      },
      {
        "color": "blue",
        "b": 43
      }
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "color",
      "type": "nominal"
    },
    "y": {
      "field": "b",
      "type": "quantitative"
    },
    "color": {
      "field": "color",
      "type": "nominal",
      "scale": null
    }
  }
}

For Pie charts

 {
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 200,
  "height": 200,
  "autosize": "none",

  "signals": [
{
  "name": "startAngle", "value": 0,
  "bind": {"input": "range", "min": 0, "max": 6.29, "step": 0.01}
},
{
  "name": "endAngle", "value": 6.29,
  "bind": {"input": "range", "min": 0, "max": 6.29, "step": 0.01}
},
{
  "name": "padAngle", "value": 0,
  "bind": {"input": "range", "min": 0, "max": 0.1}
},
{
  "name": "innerRadius", "value": 0,
  "bind": {"input": "range", "min": 0, "max": 90, "step": 1}
},
{
  "name": "cornerRadius", "value": 0,
  "bind": {"input": "range", "min": 0, "max": 10, "step": 0.5}
},
{
  "name": "sort", "value": false,
  "bind": {"input": "checkbox"}
}
  ],

  "data": [
{
  "name": "table",
  "values": [
    {"field": 10,"color": "blue"},
    {"field": 3,"color": "green"},
    {"field": 7,"color": "red"},
    {"field": 8,"color":"orange"},
    {"field": 15,"color":"yellow"}
  ],
  "transform": [
    {
      "type": "pie",
      "field": "field",
      "startAngle": {"signal": "startAngle"},
      "endAngle": {"signal": "endAngle"},
      "sort": {"signal": "sort"}
    }
  ]
}
  ],

  "scales": [
{
  "name": "color",
  "type": "ordinal",
  "domain": {"data": "table", "field": "color"},
  "range": {"scheme": "category20"}
}
  ],

  "marks": [
{
  "type": "arc",
  "from": {"data": "table"},
  "encode": {
    "enter": {
      "fill": { "field": "color",
              "type": "nominal",
            "scale": null},
      "x": {"signal": "width / 2"},
      "y": {"signal": "height / 2"}
    },
    "update": {
      "startAngle": {"field": "startAngle"},
      "endAngle": {"field": "endAngle"},
      "padAngle": {"signal": "padAngle"},
      "innerRadius": {"signal": "innerRadius"},
      "outerRadius": {"signal": "width / 2"},
      "cornerRadius": {"signal": "cornerRadius"}
    }
  }
}
  ]
}

Upvotes: 1

alex314159
alex314159

Reputation: 3247

I had the same problem and with a little help from https://vega.github.io/vega-lite/examples/bar_color_disabled_scale.html I got to the following - the idea is to encode the color in the data:

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28, "c": "black"},
      {"a": "B", "b": 55, "c": "black"},
      {"a": "C", "b": 43, "c": "black"},
      {"a": "D", "b": 91, "c": "red"}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"},
    "color": {"field": "c", "type": "nominal", "scale": null}
  }
}

alternatively this also works and keeps the legend if you need it:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28},
      {"a": "B", "b": 55},
      {"a": "C", "b": 43},
      {"a": "D", "b": 91}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal", "sort": ["C", "A", "B", "D"]},
    "y": {"field": "b", "type": "quantitative"},
    "color": {"field": "a", "type": "nominal", "sort": ["C", "A", "B", "D"], "scale": {"range": ["red", "black", "black", "black", "black"]}}
  }
}

Upvotes: 0

M Falanga
M Falanga

Reputation: 2077

Using the Vega bar chart example you linked to:

First, create a scale to define the colors:

{
  "name": "colors",
  "type": "ordinal",
  "domain": {"data": "table", "field": "category"},
  "range": {"scheme": "category10"}
}

The value for the "scheme" can be a built-in scheme from Vega, or a custom scheme.

Then, you need to specify the color for the fill on the mark's update property set, specifying the name of the scheme:

"update": {
    "fill": {"scale": "colors", "field": "category"}
},

Upvotes: 3

dominik
dominik

Reputation: 5935

You can define a categorical color scale and use it to change the color of the bar mark. Check out some of the other examples that use categorical color scales.

Upvotes: 0

Related Questions