Evenly distributed (equidistant) x axis grid lines

An injection that removes the boundary lines, which depending on periodicity can produce an uneven grid. It then prints the boundary labels as regular labels where it makes sense to do so. The result is a more equidistant grid, at the expense of not always seeing the boundary lines.

by ChartIQ Library

HTML

<link rel="stylesheet" type="text/css" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css" media="screen" />

<div class="chartContainer" style="width:100%;height:400px;position:relative;"></div>

<!--[if IE 8]><script>alert("This template is not compatible with IE8");</script><![endif]-->

JavaScript

import "https://jsfiddle.chartiq.com/chart/js/advanced.js";
import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/components.js";
import "https://jsfiddle.chartiq.com/chart/js/deprecated.js";

// Activate the License Key
import getLicenseKey from "https://jsfiddle.chartiq.com/chart/key.js";
getLicenseKey(CIQ);

function injectionSample() {
  stxx.chart.xAxis.idealTickSizePixels = 50; // try to put labels every 50 pixels as long as they do not overlap
  stxx.chart.yAxis.goldenRatioYAxis = false; // don't try to match the x grid line spacing with the y gridline spacing.
  stxx.chart.xAxis.timeUnitMultiplier = 1; // try to put labels every 1 unit as long as they do not overlap

  CIQ.ChartEngine.prototype.prepend("createXAxis", function(chart) {
    var axisRepresentation = this.createTickXAxisWithDates(chart);
    var i = axisRepresentation.length
    while (i--) {
      if (axisRepresentation[i].grid == "boundary") {
        if (axisRepresentation[i + 1]) axisRepresentation[i + 1].text = axisRepresentation[i].text;
        axisRepresentation.splice(i, 1);
      }
    }
    this.headsUpHR();

    // for 4+ hour periodicity (in this case interval larger than 240 minutes) force a time unit of HOUR instead of the DAY default
    if (this.layout.periodicity = 1 && this.layout.interval >= 240)
      stxx.chart.xAxis.timeUnit = CIQ.HOUR;
    else
      stxx.chart.xAxis.timeUnit = null;

    return axisRepresentation;
  });
}

CIQ.ChartEngine.prototype.append("draw", injectionSample);



// Declare a CIQ.ChartEngine object. This is the main object for drawing charts.
var stxx = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer"),
  layout: {
    "chartType": "candle",
    "crosshair": true,
    "candleWidth": 30,
    "periodicity": 1,
    "interval": 'day',
  },
  preferences: {
    "currentPriceLine": true,
    "whitespace": 300
  }
});

stxx.chart.xAxis.fitLeftToRight = true; // default to legacy x-axis

stxx.loadChart(
  "SPY", [{
     ...