[Chartjs]-Single bar with background Chart.js

by

11šŸ‘

There is no easy way to do this in Chart.js (such as a specific ā€œ100% stacked barā€ type). What you need is two stacked horizontal bars.

  • First, define your chart-type as a horizontalBar

    // html
<canvas id="chart" height="20"></canvas>

// javascript
var ctx = document.getElementById('chart');
var bar_chart = new Chart(ctx, {
  type: 'horizontalBar' // this will give you a horizontal bar.
  // ...
};

  • In order to have a single bar instead of two, they need to be stacked. You also need to hide the scales. Optionally, you can hide the legend and the tooltip. This is all configured in the options:

    var bar_chart = new Chart(ctx, {
  // ...
  options: {
    legend: {
      display: false // hides the legend
    },
    tooltips: {
      enabled: false // hides the tooltip.
    }
    scales: {
      xAxes: [{
        display: false, // hides the horizontal scale
        stacked: true // stacks the bars on the x axis
      }],
      yAxes: [{
        display: false, // hides the vertical scale
        stacked: true // stacks the bars on the y axis
      }]
    }
  }
};

  • As stacked bars are placed on top of each other, your first dataset contains your value (57.866), and the second dataset corresponds to max - value. Hereā€™s an example considering value = 57866 and max = 80000:

    var value = 57866; // your value
var max = 80000; // the max

var bar_chart = new Chart(ctx, {
  // ...
  datasets: [{
    data: [value],
    backgroundColor: "rgba(51,230,125,1)"
  }, {
    data: [max - value],
    backgroundColor: "lightgrey"
  }]
};

Hereā€™s the jsfiddle with the full code.

1šŸ‘

In addition to @Tarekā€™s answer,

If you need to get the percentage value in the bar,

https://jsfiddle.net/akshaykarajgikar/bk04frdn/53/

Dependensies:

https://www.chartjs.org/

https://chartjs-plugin-datalabels.netlify.app/

var bar_ctx = document.getElementById('bar-chart');
var bar_chart = new Chart(bar_ctx, {
  type: 'horizontalBar',
  data: {
    labels: [],
    datasets: [{
      data: [57.866],
      backgroundColor: "#00BC43",
      datalabels: {
        color: 'white'               //Color for percentage value
      }
    }, {
      data: [100 - 57.866],
      backgroundColor: "lightgrey",
      hoverBackgroundColor: "lightgrey",
      datalabels: {
        color: 'lightgray' 			// Make the color of the second bar percentage value same as the color of the bar
      }
    }, ]
  },
  options: {
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    scales: {
      xAxes: [{
        display: false,
        stacked: true
      }],
      yAxes: [{
        display: false,
        stacked: true
      }],
    }, // scales
    plugins: {																	// PROVIDE PLUGINS where you can specify custom style
      datalabels: {
        align: "start",
        anchor: "end",
        backgroundColor: null,
        borderColor: null,
        borderRadius: 4,
        borderWidth: 1,
        font: {
          size: 20,
          weight: "bold",											//Provide Font family for fancier look
        },
        offset: 10,
        formatter: function(value, context) {
          return context.chart.data.labels[context.dataIndex];		//Provide value of the percentage manually or through data
        },
      },
    },
  }, // options


});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>

<canvas id="bar-chart" height="20"></canvas>

Leave a comment