ChartJS: How to center monthly bars against a daily line chart?

Question

I'm trying to display total monthly sales and daily stock level. This way you could easily see that you didn't have any sales a particular month because you had low stock. Monthly sales is a bar chart that should be in the center of each month (in between the ticks).

In order to get it close to the middle my data is using the 15th of each month as the date to center it. I would want to know if there is a better way to achieve this?

JSFiddle to play around with: https://jsfiddle.net/8Lydhpqc/3/

const dailyStock = [
  { x: "2017-08-02", y: 1 },
  { x: "2017-08-25", y: 3 },
  { x: "2017-09-10", y: 7 },
  { x: "2017-09-28", y: 0 },
  { x: "2017-10-02", y: 3 },
  { x: "2017-10-24", y: 2 },
  { x: "2017-11-01", y: 1 },
  { x: "2017-11-30", y: 0 },
];

//using the 15th of each month to center it
const monthlyTotal = [
  { x: "2017-08-15", y: 1 },
  { x: "2017-09-15", y: 10 },
  { x: "2017-10-15", y: 5 },
  { x: "2017-11-15", y: 5 },
];


var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
  type: "bar",
  data: {
    labels: ["2017-08", "2017-09", "2017-10", "2017-11"],
    datasets: [
      {
        label: "sales",
        data: data,
        backgroundColor: "green",
        borderColor: "black",
        borderWidth: 1,
        order: 2,
      },
      {
        label: "stock",
        type: "line",
        data: dailyStock,
        backgroundColor: "orange",
        borderColor: "orange",
        fill: false,
        order: 1,
      },
    ],
  },
  options: {
    scales: {
      xAxes: [
        {
          type: "time",
          time: {
            unit: "month",
            displayFormats: {
              month: "MMM",
            },
          },
          distribution: "linear",
          },
      ],
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
  },
});

Answer 1

Welcome to Stackoverflow!

It seems that there is a way better than using the 15th of the month.

You need to add another axis for the bar that is a category type axis. Also its pretty critical that you have "offset: true" on that axis as well. Otherwise it will not center.

In the code below I named that category "bar" and the existing one "line"

I also created a fiddle: https://jsfiddle.net/jyf8ax3e/

var myChart = new Chart(ctx, {
  type: "bar",
  data: {
    labels: ["2017-08", "2017-09", "2017-10", "2017-11"],
    datasets: [
      {
        barPercentage: .7,
        xAxisID: "bar",
        label: "sales",
        data: monthlyTotal,
        backgroundColor: "green",
        borderColor: "black",
        borderWidth: 1,
        width: 55,
        order: 2,
      },
      {
        label: "stock",
        type: "line",
        data: dailyStock,
        backgroundColor: "orange",
        borderColor: "orange",
        fill: false,
        order: 1,
      },
    ],
  },
  options: {
    scales: {
      xAxes: [
        {
            id: "line",
          type: "time",
          time: {
            unit: "month",
            displayFormats: {
              month: "MMM",
            },
          },
          distribution: "linear",
          },
          {
            id: "bar",
          offset: true,
          type: "category",
          distribution: "series",
          }
      ],
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
  },
});