Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to adjust axis text - dc.js

Tags:

css

dc.js

I am a first time user of dc.js and I want to change the font color and size of the text on the axis of my charts. Does anyone know a quick and easy way to do this?

like image 637
hockeyCode Avatar asked Jul 19 '15 01:07

hockeyCode


People also ask

How do I change the font of the axis in D3?

For CSS, we can utilise that D3 adds class ‘tick’ to each of the ticks on the axis. When changing the font of the axis, it might be an idea to consider using a font that either has tabular figures build-in, or supports the font-variant-numeric: tabular-nums; CSS property to ensure that numbers are aligned correctly.

How to set the scale of the axis in D3?

The d3.axis.scale () Function in D3.js is used to sets the scale and return the axis. If this function is not provided with a specified scale, returns the current scale. Parameters: This function accepts only a single parameter as mentioned above and described below: scale: This parameter is an optional parameter and it holds the used scale.

How do I make text appear disassociated from the axis ticks?

This has the effect of making sure that the text rotates about the end of the date. This makes sure that the text all ends up a uniform distance from the axis ticks. The 'dx' and 'dy' attribute lines move the end of the text just far enough away from the axis tick so that they don't crowd it and not too far away so that it appears disassociated.

How do I push the margins to fit the Axis title?

By setting standoff and turning automargin on, plotly.js will push the margins to fit the axis title at given standoff distance.


1 Answers

.dc-chart .axis text {
  font-size: /* Insert font size */;
  color: /* Insert color here */;
}
like image 87
Ben Leitner Avatar answered Oct 12 '22 13:10

Ben Leitner