DenebRoundedBarChart.json

{
  "data": {
    "name": "dataset"
  },
  "title": {

    "text": "Top Sales by Product",
    "font": "Roboto",
    "fontSize": 20,
    "color": "black"
  },
  "transform": [
    {
      "calculate": "5",
      "as": "text_x"
    }
  ],
  "encoding": {
    "x": {
      "field": "Sum of Sales",
      "type": "quantitative",
      "axis": null
    },
    "y": {
      "field": "Product",
      "type": "nominal",
      "sort": "-x",
      "axis": {
        "title": null,
        "ticks": false,
        "domain": false,
        "bandPosition": 0,
        "labels": false
      }
    },
    "color": {
      "value": "#2E4057"
    },
    "opacity": {
      "condition": {
        "test": {
          "field": "__selected__",
          "equal": "off"
        },
        "value": 0.3
      },
      "value": 1
    }
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "cornerRadiusTopRight": 5,
        "cornerRadiusBottomRight": 5,
        "height": 25
      }
    },
    {
      "mark": {
        "type": "text",
        "align": "left",
        "dx": 5,
        "fontSize":14
      },
      "encoding": {
        "x": {
          "field": "text_x",
          "type": "quantitative"
        },
        "y": {
          "field": "Product",
          "type": "nominal"
        },
        "text": {
          "field": "Product",
          "type": "nominal"
        },
        "color": {
          "value": "white"
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "align": "left",
        "dx": 3,
        "fontSize":14
      },
      "encoding": {
        "x": {
          "field": "Sum of Sales",
          "type": "quantitative"
        },
        "y": {
          "field": "Product",
          "type": "nominal"
        },
        "text": {
          "field": "Sum of Sales",
          "type": "quantitative",
          "format": ".2s"
        },
        "color": {
          "value": "black"
        }
      }
    }
  ]
}