graphPieA wrapper style of the more general style graph. The style graphPie allows to draw simple pie graphs using either statically uploaded data or dynamic user input data (collected from the style formUserInput).
The pie graph is rendered from a specific form input field or data table column. This is specified by the fields data-source and name where the former indicates the source form or table and the latter the form input field or table column. Each occurrence of a distinct data value is represented as a percentage value in the pie.
To provide labels and colors the field value_types can be used. To further customize the graph the fields layout and config are available. Refer to the Documentation of Plotly.js for more information on the available options.
Unknown Style styleSignature
A simple pie chart with no customization is rendered with the following default values:
hoverinfo: label+value+percenttextinfo: percentUnknown Style graphPie
This is an example of a pie graph where the field hole is set to 40. This means the 40% of the pie chart is filled with a hole to make it appear in a doughnut shape. Otherwise, the default configuration is used.
Unknown Style graphPie
The following example show how to customize the hover text as well as the text shown on the graph. To do this the fields hoverinfo and textinfo can be used. The value of each respective field is described in the title of each graph. The title is defined with the key title in the field layout. Note that the newline in the title can be achieved by using the string <br> which translates to the HTML newline tag <br>.
For all graphs the legend is disabled and the margin is reduced to save some space. This is achieved by setting the field layout to
{
"showlegend": false,
"margin": { "l": 40, "r": 40 }
}Further, the graph menu bar was disabled by setting the field config to
{
"displayModeBar": false
}Unknown Style graphPie
Unknown Style graphPie
Unknown Style graphPie