Search code examples
labelalignmentdimple.js

Dimple.js: How to set the X-Axis ticks to the mid of each interval?

Having a dimple.js line plot to compare time series for several years, my plot uses a TimeAxis on x, with one tick per month.

var x = myLinePlot.addTimeAxis("x", "month_day");

I would like the tick labels on the x axis, to be printed at the mid of each interval, instead of being aligned to the ticks.

enter image description here

Solution

  • One way to offset dimple's tick labels at the mid of each interval is to use dimple.axis.shapes after the plot has been drawn. This allows to access each SVG <text> element (i.e. the labels) that can be translated using raw d3 capabilities (see https://d3js.org/d3-axis).

    Here's how one can move each tick label 55 pixels to the right and 5 pixels upwards:

    myLinePlot.draw();
x.shapes.selectAll("text").attr("transform", `translate(55,-5)`);