How to change x ticks wording programmatically

[ewaldman]

Hi. I have a LineChart to display dates with months. For instance Nov. Or, Oct. etc. It works fine. One problem is: when it displays months the ticks have the long month name (November , October , etc). This happens when we have data spanning across a few months, the chart prints the long month name at the point the months change. We would like it to say the short month names (Nov, Oct). We tried doing it programmatically but it didn't work. What can we do to specify upon chart creation that it should use short month name (Nov, etc).? Or, what can we do to change it programmatically?

Here's what we tried:

lineChart.selectAll('.x.axis text').each(function(d, index, nodeList) {

          const el = d3.select(nodeList[index]);
          el.text(".....");  //  here is where we format what I want.       

        });

[gordonwoodhull]

That would be

chart.xAxis().tickFormat(d => /* format d.key here */)

coordinateGridMixin.xAxis docs

See the d3-axis documentation for more details, and be sure to do this in a separate statement since this starts a chain on the axis object, not the chart.

[ewaldman]

Thank you