Chartjs-Can you set bar thickness to align with the x-axis scale in ChartJS?

by

1👍

✅

You need to set the barPercentage and categoryPercentage in the bar dataset to 1:

const lineData = [
    { "x": 1, "y": 31 }, { "x": 2, "y": 94 }, { "x": 3, "y": 44 }, { "x": 4, "y": 4 }, { "x": 5, "y": 60 }, { "x": 6, "y": 4 }, { "x": 7, "y": 24 }, { "x": 8, "y": 20 }, { "x": 9, "y": 54 }, { "x": 10, "y": 63 }, { "x": 11, "y": 87 }, { "x": 12, "y": 59 }, { "x": 13, "y": 17 }, { "x": 14, "y": 30 }, { "x": 15, "y": 23 }, { "x": 16, "y": 72 }, { "x": 17, "y": 38 }, { "x": 18, "y": 14 }, { "x": 19, "y": 47 }, { "x": 20, "y": 28 }, { "x": 21, "y": 6 }, { "x": 22, "y": 89 }, { "x": 23, "y": 99 }, { "x": 24, "y": 30 }, { "x": 25, "y": 44 }, { "x": 26, "y": 85 }, { "x": 27, "y": 16 }, { "x": 28, "y": 55 }, { "x": 29, "y": 34 }, { "x": 30, "y": 23 }, { "x": 31, "y": 95 }, { "x": 32, "y": 5 }, { "x": 33, "y": 82 }, { "x": 34, "y": 14 }, { "x": 35, "y": 11 }, { "x": 36, "y": 82 }, { "x": 37, "y": 30 }, { "x": 38, "y": 79 }, { "x": 39, "y": 13 }, { "x": 40, "y": 4 }, { "x": 41, "y": 86 }, { "x": 42, "y": 15 }, { "x": 43, "y": 51 }, { "x": 44, "y": 70 }, { "x": 45, "y": 1 }, { "x": 46, "y": 91 }, { "x": 47, "y": 83 }, { "x": 48, "y": 90 }, { "x": 49, "y": 42 }, { "x": 50, "y": 19 }, { "x": 51, "y": 57 }, { "x": 52, "y": 32 }, { "x": 53, "y": 2 }, { "x": 54, "y": 43 }, { "x": 55, "y": 64 }, { "x": 56, "y": 76 }, { "x": 57, "y": 66 }, { "x": 58, "y": 30 }, { "x": 59, "y": 40 }, { "x": 60, "y": 10 }, { "x": 61, "y": 92 }, { "x": 62, "y": 97 }, { "x": 63, "y": 28 }, { "x": 64, "y": 17 }, { "x": 65, "y": 85 }, { "x": 66, "y": 80 }, { "x": 67, "y": 74 }, { "x": 68, "y": 91 }, { "x": 69, "y": 85 }, { "x": 70, "y": 81 }, { "x": 71, "y": 100 }, { "x": 72, "y": 10 }, { "x": 73, "y": 63 }, { "x": 74, "y": 3 }, { "x": 75, "y": 48 }, { "x": 76, "y": 95 }, { "x": 77, "y": 2 }, { "x": 78, "y": 51 }, { "x": 79, "y": 56 }, { "x": 80, "y": 50 }, { "x": 81, "y": 25 }, { "x": 82, "y": 23 }, { "x": 83, "y": 41 }, { "x": 84, "y": 61 }, { "x": 85, "y": 27 }, { "x": 86, "y": 38 }, { "x": 87, "y": 81 }, { "x": 88, "y": 16 }, { "x": 89, "y": 82 }, { "x": 90, "y": 73 }, { "x": 91, "y": 34 }, { "x": 92, "y": 47 }, { "x": 93, "y": 84 }, { "x": 94, "y": 15 }, { "x": 95, "y": 47 }, { "x": 96, "y": 82 }, { "x": 97, "y": 16 }, { "x": 98, "y": 31 }, { "x": 99, "y": 99 }, { "x": 100, "y": 57 }
];

const barData = [
    { x: 30, y: 200 }, { x: 70, y: 200 }
];

const data = {
  datasets: [{
    label: 'Overlay',
    type: 'bar',
    backgroundColor: "rgba( 0, 0, 255, 0.4 )",
    data: barData,
    barPercentage: 1,
    categoryPercentage: 1
  }, {
    label: 'Line',
    data: lineData,
    borderColor: '#FFDE03',
    backgroundColor: '#FFDE03',
    borderWidth: 2,
    pointRadius: 0,
    fill: false
  }]
}

const config = {
  type: 'line',
  data: data,
  options: {
    parsing: false,
    normalized: true,
    scales: {
      xAxes: {
        type: 'linear',
        gridLines: {
          display: true,
          color: "#555"
        },
        position: 'bottom'
      },
      yAxis: {
        min: 0,
        max: lineData.reduce(function(prev, curr) {
          return prev.y > curr.y ? prev : curr;
        })["y"],
        gridLines: {
          display: true,
          color: "#555"
        }
      }
    }
  }
};

var myChart = new Chart(
  document.getElementById('myChart'),
  config
);
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <canvas id="myChart"></canvas>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>

</html>

EDIT:

From your comment you can best make use of the annotation plugin

Example:

const lineData = [
    { "x": 1, "y": 31 }, { "x": 2, "y": 94 }, { "x": 3, "y": 44 }, { "x": 4, "y": 4 }, { "x": 5, "y": 60 }, { "x": 6, "y": 4 }, { "x": 7, "y": 24 }, { "x": 8, "y": 20 }, { "x": 9, "y": 54 }, { "x": 10, "y": 63 }, { "x": 11, "y": 87 }, { "x": 12, "y": 59 }, { "x": 13, "y": 17 }, { "x": 14, "y": 30 }, { "x": 15, "y": 23 }, { "x": 16, "y": 72 }, { "x": 17, "y": 38 }, { "x": 18, "y": 14 }, { "x": 19, "y": 47 }, { "x": 20, "y": 28 }, { "x": 21, "y": 6 }, { "x": 22, "y": 89 }, { "x": 23, "y": 99 }, { "x": 24, "y": 30 }, { "x": 25, "y": 44 }, { "x": 26, "y": 85 }, { "x": 27, "y": 16 }, { "x": 28, "y": 55 }, { "x": 29, "y": 34 }, { "x": 30, "y": 23 }, { "x": 31, "y": 95 }, { "x": 32, "y": 5 }, { "x": 33, "y": 82 }, { "x": 34, "y": 14 }, { "x": 35, "y": 11 }, { "x": 36, "y": 82 }, { "x": 37, "y": 30 }, { "x": 38, "y": 79 }, { "x": 39, "y": 13 }, { "x": 40, "y": 4 }, { "x": 41, "y": 86 }, { "x": 42, "y": 15 }, { "x": 43, "y": 51 }, { "x": 44, "y": 70 }, { "x": 45, "y": 1 }, { "x": 46, "y": 91 }, { "x": 47, "y": 83 }, { "x": 48, "y": 90 }, { "x": 49, "y": 42 }, { "x": 50, "y": 19 }, { "x": 51, "y": 57 }, { "x": 52, "y": 32 }, { "x": 53, "y": 2 }, { "x": 54, "y": 43 }, { "x": 55, "y": 64 }, { "x": 56, "y": 76 }, { "x": 57, "y": 66 }, { "x": 58, "y": 30 }, { "x": 59, "y": 40 }, { "x": 60, "y": 10 }, { "x": 61, "y": 92 }, { "x": 62, "y": 97 }, { "x": 63, "y": 28 }, { "x": 64, "y": 17 }, { "x": 65, "y": 85 }, { "x": 66, "y": 80 }, { "x": 67, "y": 74 }, { "x": 68, "y": 91 }, { "x": 69, "y": 85 }, { "x": 70, "y": 81 }, { "x": 71, "y": 100 }, { "x": 72, "y": 10 }, { "x": 73, "y": 63 }, { "x": 74, "y": 3 }, { "x": 75, "y": 48 }, { "x": 76, "y": 95 }, { "x": 77, "y": 2 }, { "x": 78, "y": 51 }, { "x": 79, "y": 56 }, { "x": 80, "y": 50 }, { "x": 81, "y": 25 }, { "x": 82, "y": 23 }, { "x": 83, "y": 41 }, { "x": 84, "y": 61 }, { "x": 85, "y": 27 }, { "x": 86, "y": 38 }, { "x": 87, "y": 81 }, { "x": 88, "y": 16 }, { "x": 89, "y": 82 }, { "x": 90, "y": 73 }, { "x": 91, "y": 34 }, { "x": 92, "y": 47 }, { "x": 93, "y": 84 }, { "x": 94, "y": 15 }, { "x": 95, "y": 47 }, { "x": 96, "y": 82 }, { "x": 97, "y": 16 }, { "x": 98, "y": 31 }, { "x": 99, "y": 99 }, { "x": 100, "y": 57 }
];

const barData = [
    { x: 30, y: 200 }, { x: 70, y: 200 }
];

const data = {
  datasets: [{
    label: 'Line',
    data: lineData,
    borderColor: '#FFDE03',
    backgroundColor: '#FFDE03',
    borderWidth: 2,
    pointRadius: 0,
    fill: false
  }]
}

const config = {
  type: 'line',
  data: data,
  options: {
    parsing: false,
    normalized: true,
    scales: {
      xAxes: {
        type: 'linear',
        gridLines: {
          display: true,
          color: "#555"
        },
        position: 'bottom'
      },
      yAxis: {
        min: 0,
        max: lineData.reduce(function(prev, curr) {
          return prev.y > curr.y ? prev : curr;
        })["y"],
        gridLines: {
          display: true,
          color: "#555"
        }
      }
    },
    plugins: {
        annotation: {
        annotations: {
          box1: {
            type: 'box',
            drawTime: 'beforeDraw',
            xScaleID: 'xAxes',
            yScaleID: 'yAxis',
            backgroundColor: 'rgba( 0, 0, 255, 0.4 )',
            xMin: 10,
            xMax: 50,
            yMin: 0,
            yMax: 100,
          }
        }
      }
    }
  }
};

var myChart = new Chart(
  document.getElementById('myChart'),
  config
);
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <canvas id="myChart"></canvas>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.0.2/chartjs-plugin-annotation.js"></script>
</body>

</html>

Leave a comment