D3FC - X-Axis Adjustments

07/11/2021, Sun

Categories: #JavaScript

Tags: #graphing

Label Modifications

D3FC provides a nice layer of convenient customization over D3 when working with basic construction of graphs such as when tweaking axis labels. The following examples will be a modification of the base example.

Offset X-axis Label Text

By default, text lies directly underneath a tick mark, but there is an option in D3FC to allow you to move the text slightly over to the right.


// ...

const scaleLinear = d3.scaleLinear();
const scaleBand = d3.scaleBand();

fc.chartCartesian(
    {
        xScale: scaleBand,
        yScale: scaleLinear,
        xAxis: {
            bottom: (scale) => {
                return fc.axisBottom(scale)
                    .tickCenterLabel(false);
            }
        }
    }
)

// ...

Offset X-axis Label Text Example

The following shows a customization of tilting the label to 45 degrees using the xDecorate function:

Angle Label Text


//...

// Chart primary options configuration
const chart = fc.chartCartesian(
    {
        xScale: scaleBand,
        yScale: scaleLinear,
    }
)

    .chartLabel('2015 Cumulative Sales')

    // x extent is categorical data so no extent required
    .xDomain(data.sales.map(d => d.month))

    // y extent used for number ranges
    // used to return the minimum and maximum value in an array from the given array using natural order.
    .yDomain(yExtent(data.sales))

    // padding is the white space between the bars
    .xPadding(0.1)
    .xDecorate(selection => {
        selection
            .select('text')
            .attr('transform', 'rotate(-45 25 15)')
    })

// ...

Angle Label Text Example

If there is a one-off change of tilting the x-axis labels without the need to perform further customization, there is a built-in faculty in D3FC for achieving this behavior:

const axis = fc.axisLabelRotate(fc.axisOrdinalBottom(scale));

However, if multiple types of transformation are required on the x-axis, one will need to use the xDecorate function to perform more manual tuning of axis and label options, but you will lose out on the ability to using the convenience "axis" methods.

Below is an example of using multiple x-axis transformation:

Change X-axis Text Color Based on Corresponding Bar Value

// ...

// Track the labels which are to have its color changed
// when the bar chart colors are also changed
const monthsSalesStatus = {};

bar.decorate(selection => {

    // The selection passed to decorate is the one which the component creates
    // within its internal data join, here we use the update selection to
    // apply a style to 'path' elements created by the bar series
    // Change to green
    selection.select('.bar > path')
        .style('fill', d => {
            if (d.sales < data.targets[0].value) {
                monthsSalesStatus[d.month] = "low"
                return 'inherit';
            } else {
                monthsSalesStatus[d.month] = "high"
                return '#0c0';
            }
        });
});

// ...

// Chart primary options configuration
const chart = fc.chartCartesian(
    {
        xScale: scaleBand,
        yScale: scaleLinear,
    }
)

    .chartLabel('2015 Cumulative Sales')

    // x extent is categorical data so no extent required
    .xDomain(data.sales.map(d => d.month))

    // y extent used for number ranges
    // used to returns the minimum and maximum value in an array from the given array using natural order.
    .yDomain(yExtent(data.sales))

    // padding is the white space between the bars
    .xPadding(0.1)
    .xDecorate((selection) => {
        selection
            .select('text')
            .attr('transform', 'rotate(-45 25 15)')
            .style('fill', d => {
                if (monthsSalesStatus[d] == "low") {
                    return '#000'
                } else {
                    return '#0c0'
                }
            });
    })

// ...

Within the bar.decorate method, tracking of the months with higher is done to allow the xDecorate method below to read the values from monthsSalesStatus to make the appropriate color changes to the x-axis labels.

Change X-axis Text Color Based on Corresponding Bar Value Example

WH