19

We use the Chart.js library in our codebase and I need to create a histogram, which is not one of their default chart types. So I'm attempting to override the x-axis tick marks on a bar chart so that they appear at the left and right corners of each bar instead of directly underneath.

In the below example I've gotten the x-axis how I want it by adding an extra item in the labels array and displaying a second x-axis in the options. But, because there's now an extra label, the bars are taking up 4/5ths of the width, leaving space for a non-existent data point.

Is there some way that I can specify to ignore the missing data point? Or offset the bars? Or am I barking up the wrong tree?

The documentation is a little hard to parse through, so I'm not sure if there's something simple I'm missing.

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: [0, 1, 2, 3, 4],
    datasets: [{
      label: 'Group A',
      data: [12, 19, 3, 5],
      backgroundColor: 'rgba(255, 99, 132, 1)',
    }]
  },
  options: {
    scales: {
      xAxes: [{
        display: false,
        barPercentage: 1.30,
      }, {
        display: true,
      }],
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    }
  }
});
canvas { max-width: 200px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart" width="20" height="20"></canvas>

Edit: I realize there are other libraries that could achieve something similar and I am looking into other options. But, I've posted this just in case someone out there knows of a solution via Chart.js, which would be ideal.

Here's an example of what the end result I'm going for is:

enter image description here

14
  • Is there any motivation for sticking to 1 library? I mean why not write a component that does exactly what you want instead of wrestling with something that was not designed for. Btw a quick google search yields that someone already tried to achieve that using the library you mentioned: jsfiddle.net/s8qas3km/17 Commented Aug 20, 2018 at 13:50
  • @ibrahimtanyalcin I'm also looking at solutions in other libraries, but we'd ideally stick to chart.js because it'd be visually consistent, it's responsive, and the file size of our built app would be smaller with just one library. I've seen that example and it, unfortunately, doesn't meet my requirements. I need the numbers of the x-axis to be on the left and right of the bars, to indicate that any value in that range would go towards that bar's count.
    – thanksd
    Commented Aug 20, 2018 at 13:59
  • I see. If you want to get the range, that implementation won't do either. You need to calculate each bin and keep the numbers in memory until you render to DOM. I have a library for that, it internally keeps track of what the ranges (shows on hover rather than the tick mark). Looks like this: bl.ocks.org/ibrahimtanyalcin/c2213de41fbc968b210ad6a8aae77a0f I'm very busy at the moment, I don't have the time to modify to add config to change the tick mark, but if you want to change it go ahead. Commented Aug 20, 2018 at 14:11
  • @ibrahimtanyalcin The data in my example represents the count for each bin, so the chart looks like how I want it except for the fact that space is being provided for an empty, fifth bar. And yeah I’ve looked at d3 as a solution, but it wouldn’t be ideal (see my last comment).
    – thanksd
    Commented Aug 20, 2018 at 14:24
  • which chart, the chart.js chart? Commented Aug 20, 2018 at 15:00

1 Answer 1

22
+300

I believe you can get the result you want by using the max parameter on the ticks configuration of the x axes.

By using 2 different x axes with different maximums you can label the bars differently from how they're drawn. Resulting in labeling the marks in between the bars without drawing an extra "empty" bar.

var ctx = document.getElementById("myChart").getContext('2d');
var dataValues = [12, 19, 3, 5];
var dataLabels = [0, 1, 2, 3, 4];
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: dataLabels,
    datasets: [{
      label: 'Group A',
      data: dataValues,
      backgroundColor: 'rgba(255, 99, 132, 1)',
    }]
  },
  options: {
    scales: {
      xAxes: [{
        display: false,
        barPercentage: 1.3,
        ticks: {
            max: 3,
        }
     }, {
        display: true,
        ticks: {
            autoSkip: false,
            max: 4,
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    }
  }
});
canvas { max-width: 200px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart" width="20" height="20"></canvas>

5
  • 1
    Boom! That's exactly what I was looking for, some way to limit the number of bars. Thank you!
    – thanksd
    Commented Aug 21, 2018 at 18:27
  • 5
    It is very important to note that the 'max: 3' and 'max: 4' are the ACTUAL values in the labels data. I struggled to find out that for long time in case anyone in same position.
    – djay
    Commented Jul 11, 2019 at 2:09
  • Oh, I see what you mean, if you aren't incrementing by units of one you'll need to take that into account, yes. Those are values on the x axis not an index.
    – Don
    Commented Jul 15, 2019 at 13:19
  • My indentation is correct in the edit version of this answer, this seems to be a bug in Stack Overflow? dunno what's going on there
    – Don
    Commented Oct 31, 2019 at 15:12
  • adding an extra tab (4 spaces) before the code fixed things, how strange....
    – Don
    Commented Oct 31, 2019 at 15:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.