'VEGA pie chart with labels - wrong position of labels

i tried to make piechart for Downtimes by machine. My input is:

"values": [{"Prostoj": "1-5min", "value": 10467, "textik":"02:54:27"},

       {"Prostoj": "5-12min", "value": 1470, "textik":"00:24:30"},

       {"Prostoj": "12-35min", "value": 5100, "textik":"01:25:00"},

       {"Prostoj": ">35min", "value": 1000, "textik":"00:00:00"}]

who "Prostoj" is Downtime-class, "value" is downtime in seconds and "textik" is label for piechart. My code in Vega-lite is this:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple pie chart with labels.",
  "height":"container",
  "width":"container",
  "data": {
    "values": [
      {"Prostoj": "1-5min", "value": 10467, "textik":"02:54:27"},
      {"Prostoj": "5-12min", "value": 1470, "textik":"00:24:30"},
      {"Prostoj": "12-35min", "value": 5100, "textik":"01:25:00"},
      {"Prostoj": ">35min", "value": 1000, "textik":"00:00:00"}
     
    ]
  },
  "encoding": {
    "theta": {"field": "value", "type": "quantitative", "stack": true}
    
  },
  "layer": [{
    "mark": {
      "type": "arc", 
      "outerRadius": 150, 
      "padAngle":0.1, 
      "cornerRadius":10
      },
    "encoding": {
      "color":{
        "field":"Prostoj",
        "type": "nominal",
        "scale":{
          "domain":["1-5min", "5-12min", "12-35min", ">35min"],
          "range":["#00FFB9", "yellow", "orange", "red"]
        },
        "legend":null
      }
    }
    
  }, {
    "mark": {"type": "text", "radius": 100, "fontSize":12, "fontWeight":"bold"},
    "encoding": {
      "angle":{"value":0},
      "theta":{"field":"value", "type": "quantitative", "stack":true},
      "text": {"field": "Prostoj", "type": "nominal"}
    }
  }]
}

but I have Probem with labels if i choose "Prostoj" as label are the labels on the right position, but if I choose for label variable "textik" then is the labelposition in graph wrong. Can somebody help me? right position wrong position Tahnk you very much in advance. Miroslav

vegamindsphere


Solution 1:[1]

You have scales contradicting one another which is confusing. This should work for you.

Editor.

enter image description here

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple pie chart with labels.",
  "height":"container",
  "width":"container",
  "data": {
    "values": [
      {"Prostoj": "1-5min", "value": 10467, "textik":"02:54:27"},
      {"Prostoj": "5-12min", "value": 1470, "textik":"00:24:30"},
      {"Prostoj": "12-35min", "value": 5100, "textik":"01:25:00"},
      {"Prostoj": ">35min", "value": 1000, "textik":"00:00:00"}
     
    ]
  },
  "encoding": {
    "theta": {"field": "value", "type": "quantitative", "stack": true}
    
  },
  "layer": [{
    "mark": {
      "type": "arc", 
      "outerRadius": 150, 
      "padAngle":0.1, 
      "cornerRadius":10
      },
    "encoding": {
      "color":{
        "field":"Prostoj",
        "type": "nominal",
        "scale":{
          "domain":["1-5min", "5-12min", "12-35min", ">35min"],
          "range":["#00FFB9", "yellow", "orange", "red"]
        },
        "legend":null
      }
    }
    
  }, {
    "mark": {"type": "text", "radius": 100, "fontSize":12, "fontWeight":"bold"},
    "encoding": {
      "angle":{"value":0},
      "theta":{"field":"value", "type": "quantitative", "stack":true},
      "text": {"field": "Prostoj", "type": "nominal"}
    }
  }]
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 David

Related Questions