CODEWITHSUNDEEP
labelalignmentdimple.js
OuzoPower
OuzoPower

Reputation: 278

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

Upvotes: 0

Views: 20

Answers (1)

OuzoPower
OuzoPower

Reputation: 278

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)`);

Upvotes: 0

Related Questions