Different font types within dasboards

Hi there,

i have the impression that the font used in the plotly charts is different from the one used in the table.

Is there a way to uniform that? (ideally by having the font in the plotly to adhere to the table one - much nicer)

Best
M

Screenshot from 2020-01-24 08-58-05732×459 38.6 KB

I moved this to the Feature Request category to see if it gets some traction.

FYI I don’t believe this is configurable given the version of Plotly that Redash currently employs (1.41.3). When this version was released there were no font configuration settings for axis or chart titles.

thanks for digging into it!

I think this is more an “anomaly” rather than a feature request, as it gives the impression of the chart to be an embedded iframe coming from different system.

However, I understand from your latest comment that it may not be such a low hanging fruit I was thinking it may have been.

I have compiled the docker images with 1.52.1 and the charts keep on working.
It is not such an authoritative statement as I didn’t run any of the test suite, but it is a good starting point

Oh nice! Would you like to try a test for me?

In /client/app/visualizations/chart/plotly/prepareLayout.js update lines 4-6

From

function getAxisTitle(axis) {
  return isObject(axis.title) ? axis.title.text : null;
}

To

function getAxisTitle(axis) {
  return {
    text: isObject(axis.title) ? axis.title.text : null,
    font: {
      family: "Courier New, monospace",
      size: 24,
    },
  };
}

And observe after recompiling the front-end assets whether the font and size of your X axis title changes? I’m using the example from Plotly’s documentation page.

The change since 1.41.3 is that layout.title now accepts an object value with text and font keys. It was a string value before.

It works: This is the layout object (added the color to be more explicit with the edit):

{
  "margin": {
    "l": 10,
    "r": 10,
    "b": 10,
    "t": 25,
    "pad": 4
  },
  "width": 1170,
  "height": 400,
  "showlegend": true,
  "xaxis": {
    "title": {
      "text": null,
      "font": {
        "family": "13px-apple-system, Courier New, monospace",
        "size": 24,
        "color": "#FF0000"
      }
    },
    "type": "linear",
    "automargin": true,
    "showticklabels": true,
    "range": [
      1988.5,
      2018.5
    ],
    "autorange": true
  },
  "yaxis": {
    "title": {
      "text": null,
      "font": {
        "family": "13px-apple-system, Courier New, monospace",
        "size": 24,
        "color": "#FF0000"
      }
    },
    "type": "linear",
    "automargin": true,
    "range": [
      609.9646111111115,
      44247.81238888889
    ],
    "autorange": true
  },
  "legend": {
    "orientation": "v",
    "y": 1,
    "x": 1,
    "xanchor": "left",
    "yanchor": "top"
  }
}

I may be wrong. But did you write a title for the X axis under the X Axis tab of the visualization editor? If the text is null then the font won’t even render.

I must have misread your post. So it does work?

I have edited the post after realizing precisely what you have commented upon
It should be possible to set the font globally I am not wrong, without having to set it in every section of the chart composition.

Whew. Thought I was losing it for a sec.

Yeah Plotly has a global font change. It’s probably easiest to keep this in the getAxisTitle() function though. Since its already called on both axes. More explicit is better than less.

My bigger question is how the Plotly upgrade impacts the other chart visualizations. Anything break? How’s the console look? Have you tried running the frontend test?

BTW: Redash uses Roboto font if you want to make the chart match the rest of the interface.

The default font of plotly is fairly close to roboto then. The striking part is the color, which makes the difference very evident - to me at least .

I would mark post #6 as solution, but i do not have the option (perhaps as feature request there’s no such option).

I moved this back into self-hosted support and picked the solution.

I have never tried to run the tests, as i have started to work with redash since 10 days or so.
I have noticed no anomalies with 1.52.1 so far.