Expose more Plotly options or direct access?

I wanted to poll how you guys feel about exposing more display options for Plotly charts.

For example, let’s say I want a line chart with markers for data points and spline smoothing:

Right now I can only do that using the “Custom” chart type, with a ton of Plotly rendering code:

var trace1 = {
  x: x,
  y: ys.r2,
  mode: 'lines+markers',
  line: {shape: 'spline'},
};

var data = [trace1];

var layout = {
  autosize: true,
  margin: { l: 10, r: 10, b: 10, t: 25, pad: 4 },
  width: Math.floor(element.offsetWidth),
  height: Math.floor(element.offsetHeight),
  xaxis: { automargin: true },
  yaxis: { automargin: true, range: [0, 100] },
  showlegend: false
};

var config = {
  responsive: true,
  displayModeBar: false
};

Plotly.newPlot(element, data, layout, config);

In this case, the only two relevant lines are:

mode: 'lines+markers',
line: {shape: 'spline'},

There are two questions that come to mind:

1. Is this a level of customization Redash should allow to begin with, without doing what I did above and requiring a completely custom chart? (My opinion is obviously YES).
2. What’s the best approach to allow this?

One approach could be to expose specific settings through the UI on a case-by-case basis: “Line Style” fo each series in a line chart that allows selections like “Line”, “Line with Markers” and also a checkbox for “Line Smoothing”.

Another approach would be allow people to pass in Plotly configuration code for each series that would override the generated configuration as-is. This approach would be much more powerful and flexible but also not as practical for people who are not familiar with Plotly and the options it has.

Thoughts?

Either approach is acceptable and they can coexist. But today we use the first approach. (I’ve often wished for splines in Redash).

One considerations with splines is the UI. A Line Shape setting makes sense for simple cases. But what if the user adds a line to a bar chart via the Series tab? How would they select spline? Perhaps spline could become its own chart type (Bar, Pie, Line, Spline)?

With your approach, the long-term goal is to make it possible for users to supply their own visualizations into the app without modifying source code (i.e. this would work for SaaS customers too). No reason to restrict it to just Plotly.

We would love to expose as much customization as possible while keeping the UI as simple as possible. At least for the simple cases.

I.e., just to generate a simple bar chart you shouldn’t have to go through too many steps. But on the otherhand we want to allow you to customize your chart to reach the visual result you are looking for (and makes sense for your data).

Besides that, as @jesse mentioned, Spline is often requested (and I think we even have an open issue for it).

I thought of suggesting just adding new chart types (spline & spline with markers), but actually you can apply the markers setting to several chart types. I guess what you suggested – both adding new chart types and additional options is unavoidable.

Daniel,

Where do you find the cutom chart mode?

First up, please note that you have to be on the self-hosted version of Redash. There’s an environment variable that you have to set in in order to see the custom chart option. Once you have all that, when you click on the “Chart type” dropdown in Redash, it’s at the very botton and it’ll let you any JavaScript that renders Plotly. You might find referencing the Plotly JS docs helpful

Thanks Daniel,

I appreciate the tip.