[Chartjs]-Charts.js candlestick (Financial Charts) displays half the bar in the beginning and the end

by

2👍

you can add an extra label to either side of the x-axis

by default, the labels are pulled from the data,
to override, we can pull the labels out of the data… 

var candleCount = 60;
var data = getRandomData('April 01 2017', candleCount);

var xTicks = data.map(function (x) {
  return x.t;
});

then add an extra day before the first and after the last… 

var oneDay = (1000 * 60 * 60 * 24);
xTicks.unshift(xTicks[0] - oneDay);
xTicks.push(xTicks[xTicks.length - 1] + oneDay);

then add the new labels to the chart options… 

new Chart(ctx, {
  type: 'candlestick',
  data: {
    labels: xTicks,
    datasets: [{
      label: "CHRT - Chart.js Corporation",
      data: data,
    }]
  },
});

2👍

In the axis options, for the time axis, add offset: true.

new Chart(ctx, {
  type: 'candlestick',
  data: {
    labels: xTicks,
    datasets: [{
      label: "CHRT - Chart.js Corporation",
      data: data,
    }]
  },
  options: {
     scales: {
        xAxes: [{
           type: 'time',
           offset: true,
           distribution: 'series',
           ticks: {
              source: 'data'
           }
     }
  }
})

This is added in the new defaults for the financial chart.

Leave a comment