Javascript - How to remove scale from vega-lite visualization?

8indie8
April 11, 2024
78 views
0 votes
2 Answers

I have a vega-lite based visualization and I would like to remove the scale from the visualization and I would like to remove the scale and move the volume indicator inside the right end of the bar:

I want to remove the areas circled with red:

Here is the code that I currently have:

{
  "data": {"name": "dataset"},
  "layer": [
    {
      "mark": {
        "type": "bar",
        "opacity": 0.3,
        "tooltip": true
      },
      "encoding": {
        "x": {"field": "NULL"}
      }
    },
    {
      "mark": {
        "type": "bar",
        "tooltip": false
      },
      "encoding": {
        "x": {
          "field": "Number of calls__highlight"
        },
        "opacity": {
          "condition": {
            "test": {
              "field": "__selected__",
              "equal": "off"
            },
            "value": 0
          },
          "value": 1
        }
      }
    }
  ],
  "encoding": {
    "y": {
      "field": "Number of calls",
      "type": "nominal",
      "title": ""
    },
    "x": {
      "type": "quantitative",
      "axis": {"title": ""},
      "title": ""
    }
  },
  "config": {
    "bar": {
      "color": "#605E5C",
      "cornerRadiusTopRight": 10,
      "cornerRadiusBottomRight": 10
      
    }
  }
}

Answers

This is currently not supported in the vega-lite library, but if you are willing to use a different method of displaying the data, you can get a similar result using chart.js:

const chart = document.getElementById("myChart");

const data = {
  labels: [""],
  datasets: [{
    axis: "y",
    data: [951],
    backgroundColor: "#605E5C",
    borderRadius: 10
  }]
};

const config = {
  type: "bar",
  plugins: [ChartDataLabels],
  data,
  options: {
    indexAxis: "y",
    barThickness: 25,
    scales: {
      x: { display: false, },
      y: { display: false, },
    },
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        enabled: false,
      },
      datalabels: {
        color: "white",
        font: {
          weight: "bold",
        },
        anchor: "end",
        align: "start",
      },
    },
  },
};

new Chart(chart, config);

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div>
  <canvas id="myChart"></canvas>
</div>

Within each of your x and y encoding add this:

"axis": {
        "grid": false,
        "ticks": false,
        "domain": false,
        "labels": false,
        "title": null
      }

Example where I hide everything.
config at the bottom removes the silver chart border.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28},
      {"a": "B", "b": 55}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "a",
      "type": "nominal",
      "axis": {
        "grid": false,
        "ticks": false,
        "domain": false,
        "labels": false,
        "title": null
      }
    },
    "y": {
      "field": "b",
      "type": "quantitative",
      "axis": {
        "grid": false,
        "ticks": false,
        "domain": false,
        "labels": false,
        "title": null
      }
    }
  },
  "config": {"view": {"stroke": null}}
}

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – How to remove scale from vega-lite visualization?

Answers