Labels for dataviz bar charts, javascript provided

[ygorigor]

If it's possible add an option to display labels on or inside bars for a bar charts

[Gustry]

Are you using LWC 3.4? It might be already possible with the JSON description.

[ygorigor]

@Gustry can you point me to right direction, where I can find a json template?

[Gustry]

Sorry, I was fast ;-) AFAIK, you are using LWC 3.4 right? If you really want to enjoy the latest features of LWC 3.4, you need to have the latest version of the QGIS plugin version. The version published on plugins.qgis.org is only <= 3.3, it's the master branch on the repository.

There is also the dev branch on this repository. Either use git to have it, or have a look on https://packages.3liz.org/ to have the dev version. This versions enables the 3.4 features.

Read here https://github.com/3liz/lizmap-plugin#lizmap-qgis-plugin

[ygorigor]

Thanks

[Gustry]

Let me know if it answers your question. But I think @mdouchin asks this new JSON configuration for this.

[ygorigor]

@Gustry I tried dev version of QGIS plugin. There is an option to change chart layout with a JSON, but it's not possible to show labels on bars, or I can't figure out how to do this.

[Gustry]

An example from @mdouchin :

            "user_layout": {
              "xaxis": {
                  "showticklabels": "False"
              },
              "yaxis": {
                  "showticklabels": "False"
              },
              ...
            }

and he gave this link: https://plotly.com/javascript/reference/#layout

Ticket in the documentation : https://github.com/3liz/lizmap-documentation/issues/159

@mdouchin Can you tell us if it's possible or not with this new widget?

[mdouchin]

I think the labels for bars cannot be changed with this JSON, since this JSON is used to override the layout, not the plot config. For the labels in bars, I think we should:

• add an hard coded option in Lizmap plugin or a checkbox
• provide a way to override the plot config too and not only the layout. This way we would not need to make the plugin UI more complex for any personal need (plotly has a wide range of options for the different plot types...)

NB: To keep references for the layout, here are some examples:

• BAR/SCATTER : add units in axis label

{"yaxis": {"ticksuffix": " ha"}}

• BAR : remove labels

{"xaxis": {"showticklabels": false}}

• BAR : remove automatic k, M, G in Y axis values and in values displayed on hover

{"yaxis": {"tickformat": ",.2f"}}

ref: http://bl.ocks.org/mstanaland/6106487

• BAR : change data ordering

  • by X ascending or descending:

  {"xaxis": {"categoryorder": "category ascending"}}
  

  • by Y ascending or descending:

  {"xaxis": {"categoryorder": "total ascending"}}
  

• MARGINS (l=left, t=top, r=right, b=bottom) For example, to add a margin left to the Y axis if you have big numbers

{"margin": {"l": 70}}

• POLICE FONT

{"xaxis": {"tickfont": {"size": 10}}}

You can combine these examples to fit your needs.

[ygorigor]

I found a solution with Java script so I will close it

[pcav]

Would you mind sharing your js? Thanks.

[ygorigor]

Would you mind sharing your js? Thanks.

@pcav this is script that I use

lizMap.events.on({ 'datavizplotloaded': function(e) { var update_style = { 'cliponaxis': false, 'textposition': 'auto', 'insidetextanchor': 'middle', 'texttemplate': '%{value}', 'insidetextfont': { 'color': 'white' }, 'outsidetextfont': { 'color': 'black' } }; Plotly.restyle(e.id, update_style); } });

[pcav]

Thanks

[mdouchin]

Thanks We should add it in the documentation.

[Gustry]

Ticket transferred into the documentation