Chart title in export

[tdipisa]

Description

Check if possible to include the widgets chart title in the chart export. The export functionality is available through PlotlyJS native tools in the charts.

What kind of improvement you want to add? (check one with "x", remove the others)

• [x] Minor changes to existing features
• [ ] Code style update (formatting, local variables)
• [ ] Refactoring (no functional changes, no api changes)
• [ ] Build related changes
• [ ] CI related changes
• [ ] Other... Please describe:

Other useful information

[rohitp20092]

@dsuren1 , Please have a look on investigation .

1. Outcome: Title has to be added also to layout property of chart, in order to export chart with title.
2. Limitation: Adding title to layout property displays inline title along with widget title and we need to mitigate showing only one
3. Workaround: We can hide the inline title via style class, this way we can still export in chart also don't have to duplicate the title shown in the chart widget.

[dsuren1]

@rohitp20092 Instead of a workaround, could you try to look for something concrete, explore the library and see if you can use event handler to update title to layout only when downloading plotly_buttonclicked

[rohitp20092]

HI @dsuren1 , I tried to find out alternative solution tp export the title with chart but does not get much.. I tried to put event handler on it but not fetching any event for exporting Also try to add one more mode-bar button on the chart to use click event , but I see it's not working with download icon.

Please see the code which I apply : config: { displayModeBar: isModeBarVisible, // minimal to display 8 tools. modeBarButtonsToRemove: [ // to use less space, they looks not so useful "lasso2d", "select2d", "hoverCompareCartesian", "hoverClosestCartesian", "hoverClosestPie", ], modeBarButtonsToAdd: [ { name: 'color toggler', icon: icon1, click: function() { alert('clicked') }}], displaylogo: false, }, }; };

[dsuren1]

Hi @offtherailz Kindly share your thoughts and feedback on this.

Just to summarize the investigation done by @rohitp20092 It is possible to export chart title to png by adding the title to chart layout object. Since Mapstore's widget places title on the header, adding the above solutions results in title appreaing twice.

Possible approaches

1. Add a css class to hide title in Charts, this way the chart is exported with title and eliminates title duplication in widget
2. Customize chart widget alone to skip header and show title from Chart

Limitations:

• Adding a custom button to export is not exposed by the lib
• Event handlers interception to update layout property doesn't work

[offtherailz]

Hi, IMHO I'm afraid that both the approches are too dirty. In fact the problem is that the feature request doesn't fit the actual design, confusing the chart export with the widget export. In fact now we are only using a plotly native functionality and nothing more.

Forcing plotly to do it in by injecting/hacking/hiding only to add a title is not a good strategy. A future request that will ask to add description, choose format, or other spot requirements may mess a lot this initial solution.

The only clean possibility to use the native print functionality I see is to use a custom button in the modal bar of plotly as alternative, that prompts a modal window with a preview chart and some options. The preview chart can be a plotly chart used to generate the real chart

• you can select the format (jpeg/png only in free plotlyJS)
• check / uncheck title
• add some text or other things

Other solutions are not desiderable in order to make things maintainable.

The only alternative I see is to use, in a new tool that calls Plotly.toImage, and copying the generated image in a new canvas, where to draw header manually. This requires us to handle also the title text, but is more similar to a widget export.

My personal idea is that the decision about how this feature should be implemented should be taken when we have a precise idea of future evolution of widgets.