Fairly straightforward, but I have a single bar on a barchart that I want to show by itself. I've hidden the axes and their ticks, but there is still all of that space there on the left and top//bottom of chart from the axes and the legend I am presuming. Is there a way to remove this space without just putting negative margins on the element?

I've tried working with negative padding, but that doesn't work on the top and bottom of the chart.

I made a quick CodeSandbox to show my actual component

Any tips would be greatly appreciated!

Cheers!

Horizontal Stacked Bar Chart

<template>
  <div style="width: 100%; height: 100%">
    <canvas :id="id" width="100%" height="100%"></canvas>
  </div>
</template>
<script>
import { defineComponent, onMounted } from "vue"
import Chart from "chart.js/auto"
import ChartDataLabels from "chartjs-plugin-datalabels"

export default defineComponent({
  props: {
    kind: {
      /**
       * @example: 'single', 'stacked'
       */
      type: String,
      default: "stacked",
    },
    color: {
      type: String,
      default: "rgba(255, 99, 132, 1)",
    },
    labels: {
      type: Array,
      default: () => ["S1", "S2", "S4", "S6"],
    },
    datasets: {
      type: Array,
      default: () => [
        {
          label: "va_value",
          data: [80, 10, 60, 50],
          backgroundColor: "#11DCB5",
          borderColor: "transparent",
          barThickness: 20,
          minBarLength: 4,
          // This is here to show SOMETHING even if the value is 0
        },
        {
          label: "nva_value",
          data: [20, 0, 40, 0],
          backgroundColor: "#CA2F4B",
          borderColor: "transparent",
          barThickness: 20,
          minBarLength: 4,
        },
      ],
    },
  },
  setup(props, context) {
    const id = Math.random().toString()
    onMounted(() => {
      Chart.register(ChartDataLabels)
      const ctx = document.getElementById(id)
      const myChart = new Chart(ctx, {
        type: "bar",
        data: {
          labels: props.labels,
          datasets: props.datasets,
        },
        options: {
           layout: {
              padding: {
                left: -20,
                bottom: -20,
                top: -20
              }
            },
          plugins: {
            legend: {
              display: false,
            },
            datalabels: {
              formatter: function (value) {
                return props.kind === "stacked" ? `${value}s` : `${value}%`
              },
              color: "#fff",
              anchor: "center",
              align: "center",font: {
                weight: "bold",
              },
            },
          },
          responsive: true,
          maintainAspectRatio: false,
          indexAxis: "y",
          scales: {
            y: {
              beginAtZero: true,
              stacked: true,
              ticks: {
                color: "#fff",
              },
              grid: {
                drawBorder: false,
                display: false,
              },
            },
            x: {
              display: props.kind === "stacked" ? true : false,
              beginAtZero: true,
              stacked: true,
              ticks: {
                color: "#fff",
              },
              grid: {
                drawBorder: false,
                display: false,
              },
              title: {
                display: true,
                text: props.kind === "stacked" ? "Step Time (s)" : "",
                color: "#fff",
              },
            },
          },
        },
      })
      myChart
    })
    return { id }
  },
})
</script>
<style lang=""></style>

CodePudding user response：

This is because you set barThickness to 20 in your datasets. If you remove this it will show as you want:

https://codesandbox.io/s/modest-wave-60xui0