CODEWITHSUNDEEP
javascriptcssdygraphs
sdaau
sdaau

Reputation: 38619

How to change font size for annotations in dygraphs?

Take a look at the this example, from Dygraph setAnnotations with repeated x values :

http://jsfiddle.net/wn43LLv7/1/

Note that there they tried to use a CSS class:

.dygraph-annotation
{
    font-size: 14;
...

... which tries to change the font size. However, changing the font size and running the snippet makes no difference whatsoever.

Also, in http://dygraphs.com/annotations.html, it says:

cssClass CSS class to use for styling the annotation

... so I made another jsfiddle to test if that can change font size:

http://jsfiddle.net/u7shmody/1/

... and no, it cannot.

Which is probably not a big surprise, because if I look at the annotation in Firefox Inspect Object, I have:

<div style="font-size: 14px; left: 217.5px; top: 79.1111px; width: 16px; height: 16px; color: rgb(64, 0, 128); border-color: rgb(64, 0, 128);" class="dygraph-annotation dygraphDefaultAnnotation dygraph-default-annotation myAnnot" title="undefined">A</div>

... so, font-size is specified inline in the style attribute of the div element, which as far as I know, takes the highest priority in CSS, and no class could otherwise override it (either if we override the library ones like .dygraph-annotation, or if we try add our own custom class via cssClass).

So, how can one change font size of the annotation in dygraphs? Maybe there is some callback, which can be overriden, so font-size can be injected in the element inline style attribute?

Upvotes: 2

Views: 905

Answers (1)

danvk
danvk

Reputation: 16903

dygraphs 1 only used inline styles. dygraphs 2 moved towards storing its styles in a CSS file (dygraph.css) which makes them much easier to override. But this one got missed for reasons that are lost to time. If there's ever a dygraphs 3, it will probably fix this.

In the meantime, you'll have to use !important to override the font size with CSS.

You can also override this in JavaScript, if you prefer. The size of tooltips is determined by the axisLabelFontSize property. So to change it, you can adjust that property:

new Dygraph(div, data, { axisLabelFontSize: 28 });

Of course, this will make the labels on your axes a really big font! To make them more normal, you can adjust them back:

new Dygraph(div, data, {
  axisLabelFontSize: 28,
  axes: {
    x: { axisLabelFontSize: 14 },
    y: { axisLabelFontSize: 14 },
  }
});

Definitely a hack, but it might just work!

Upvotes: 2

Related Questions