Custom X-axis

Using a variety of different tools and configurations, you can fully customize the rendering for the X-axis.

First, review the complete list of available parameters to see if you can accomplish your desired customization by adjusting a particular setting. A complete list can be found at STXChart.XAxis

Colors and fonts

These can be controlled by manipulating the CSS.

You can override the stx_xaxis class in stx-chart.css to change the font. If you also want to control the color, you will need to override the defaults for .Light .stx_xaxis and .Dark .stx_xaxis styles found in stx-standard.css

Fully customized X-Axis

You can set STXChart.XAxis#formatter to a function which override the label text on the x-axis and set it to anything you want for each label with your own logic.

You can also use an API injection for createXAxis() to override all of the default functionality. This is an advanced feature and only recommended for someone very experienced with the library.

STXChart.prototype.prepend("createXAxis",function(chart){ 
    // add your logic to create your own X-Axis. We can help...
     //return axisRepresentation; // This is your array of STXChart.XAxisLabel() elements used by STXChart.drawXAxis()
});

See STXChart.AdvancedInjectable#createXAxis for function signature and other details.

In the injection, you can build the xaxisRepresentation array that createXAxis() normally creates and drawXAxis() uses to draw the axis. Your injection can put anything you want to see in the X Axis labels (text), the type of label it is (boundary or line) and the location where you want to set it (hz). This is done by pushing STXChart.XAxisLabel() elements into the axisRepresentation array.

See STXChart.XAxisLabel for additional details on format and requirements.

You have to push either:

axisRepresentation.push(new STXChart.XAxisLabel(hz,"boundary",text));  

or

axisRepresentation.push(new STXChart.XAxisLabel(hz,"line",text));

You also have to create the chart.xaxis array which is used by the HUD (crosshairs) as you slide the mouse trough the chart.

This array takes objects of the following format:

    var obj={
    DT: current date,                    // in js date format
    Date: STX.yyyymmddhhmm(dtShifted)     // in string format
};

For each item you add to the xaxisRepresentation array, you add a corresponding one like so:

chart.xaxis.push(obj);

More granular x-axis

Using STXChart.AdvancedInjectable#createXAxis, the optional prettyXaxis object can be used to further control the x-axis label placement for intraday charts. This will not be used on "tick" intervals, if "ntb" flag is set or the chart type has aggregated data ( "rangebars","kagi","renko", etc.), if the timeUnit is "second" or "millisecond". For those cases STXChart#createTickXAxisWithDates will be used instead leveraging the stxx.timeIntervalMap

stxx.chart.prettyXaxis={
    "1":30, // specify that on one minute charts, x-axis labels should land on 30 minute marks
    "5":60, // specify that on five minute charts, x-axis labels should land on hourly marks
    "10":60,
    "15":60,
    "30":240, // specify that on thirty minute charts, x-axis labels should land on 4 hour marks
    "60":10000, // On hourly charts, for instance, we only want to show dates (no times) so set the minute value greater than one day
    "240":10000
};

For more granularity you can try setting the x-axis to 'Non-Time Based' mode as follows:

chartWidget.chart.xAxis.axisType = 'ntb';

Under this mode, STXChart#createTickXAxisWithDates will be used instead of STXChart.AdvancedInjectable#createXAxis. Here you can override the default label increments by setting a unit and multiplier that will produce the desired results:

stxx.chart.xAxis.timeUnit = STX.DAY;
stxx.chart.xAxis.timeUnitMultiplier = 7;

This will generate tags every 7 days. Of course, you will have to adjust your override as your periodicity changes to maintain a reasonable interval between tags.

You can alternatively try setting chart.xAxis.idealTickSizePixels to a number of desired pixels between labels. The algorithm will then attempt to find the closest match in the map of allowed values. (This algorithm will only be used if timeUnit and timeUnitMultiplier are not set) .

The map will contain an entry for every possible interval interval, each containing

                arr: list of date/times that get a label
                minTimeUnit: lower range for the interval
                maxTimeUnit: upper range for the interval

The default map is as follows, but you can override this as well:

                stxx.timeIntervalMap[STX.MILLISECOND]={
                    arr: [1,2,5,10,20,50,100,250,500],        // a label will be attempted to be placed every 1,2,5,10,20,50,100,250 and 500 MILLISECONDS
                    minTimeUnit:0,
                    maxTimeUnit:1000
                };
                this.timeIntervalMap[STX.SECOND]={
                    arr: [1, 2, 5, 10,15,30],
                    minTimeUnit: 0,
                    maxTimeUnit: 60
                };
                this.timeIntervalMap[STX.MINUTE]={
                    arr: [1,2,5,10,15,30],
                    minTimeUnit: 0,
                    maxTimeUnit: 60
                };
                this.timeIntervalMap[STX.HOUR]={
                    arr: [1, 2, 3, 4,6,12],
                    minTimeUnit: 0,
                    maxTimeUnit: 24
                };
                this.timeIntervalMap[STX.DAY]={
                    arr: [1,2,7,14],
                    minTimeUnit: 1,
                    maxTimeUnit: 32
                };
                this.timeIntervalMap[STX.MONTH]={
                    arr: [1,2,3,6],
                    minTimeUnit:1,
                    maxTimeUnit:13
                };
                this.timeIntervalMap[STX.YEAR]={
                    arr: [1,2,3,5],
                    minTimeUnit:1,
                    maxTimeUnit:20000000
                };
                this.timeIntervalMap[STX.DECADE]={
                    arr: [10],
                    minTimeUnit: 0,
                    maxTimeUnit: 2000000
                };
            }

Once the spacing has been calculated, the rendering process will begin. Just because a specific spacing has been set, it doesn't mean there will be enough space to use it. When in tick periodicity, for example, since it is not a constant interval, sometimes there won't be a minimum number of ticks required to create enough space for a label to display, so it will be skipped at rendering time. To address this, you can try changing with the zoom level by setting a smaller span and thereby creating more space between the ticks ( see STXChart#setSpan and Managing Chart Zoom and Range. You can also try to change the xaxis label width settings to allow less white space between the labels. That is done with STXChart.XAxis#minimumLabelWidth

Example:

stxx.chart.xAxis.minimumLabelWidth=20;