> ## Documentation Index
> Fetch the complete documentation index at: https://doc.lucidworks.com/llms.txt
> Use this file to discover all available pages before exploring further.

# graph:flow

export const LwTemplate = ({title = "Key questions to get you started", icon = "sparkles", cta = "Powered by Agent Studio", linkHref = "https://lucidworks.com/demo/?utm_source=docs&utm_medium=referral&utm_campaign=docs_cta_ai"}) => {
  const [isLoaded, setIsLoaded] = useState(false);
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoaded(true);
    }, 500);
    return () => clearTimeout(timer);
  }, []);
  return <div className="lw-template-container">
      <Card title={title} icon={icon}>
        {isLoaded && <span dangerouslySetInnerHTML={{
    __html: `<lw-template id="a029c1a9-28be-427e-b0e1-5d918920246a"></lw-template
            >`
  }} />}
        <Link href={linkHref} className="agent-studio-link text-left text-gray-600 gap-2 dark:text-gray-400 text-sm font-medium flex flex-row items-center hover:text-primary dark:hover:text-primary-light group-hover:text-primary group-hover:dark:text-primary-light">Powered by Lucidworks Agent Studio</Link>
      </Card>
    </div>;
};

[localhost link]: http://localhost:3000/docs/4/app-studio/reference/tags/lightning.directive.graphFlow

[mintlify link]: https://doc.lucidworks.com/docs/4/app-studio/reference/tags/lightning.directive.graphFlow

[old doc.lw link]: https://doc.lucidworks.com/app-studio/4.2/1136

<LwTemplate />

## Description

The Graph Flow Tag displays network data rendered as a Sankey diagram.
The body of the Graph Flow tag can contain a
[Chart Credit Tag](/docs/4/app-studio/reference/tags/lightning.directive.chartCredit) for adding a
credit to the chart and the [Chart Export Tag](/docs/4/app-studio/reference/tags/lightning.directive.chartExport) for exporting the chart.

For detail on how to change the color and background color see the demo
below, for more detail on what you can change and set using CSS see
[here.](http://www.highcharts.com/docs/chart-design-and-style/style-by-css)

The following tags can be nested within the chart sankey tag.

* [Chart Credit Tag](/docs/4/app-studio/reference/tags/lightning.directive.chartCredit)
* [Chart Export Tag](/docs/4/app-studio/reference/tags/lightning.directive.chartExport)

## Usage

as element:

```xml wrap  theme={"dark"}
<graph:flow
       platform="{string}"
       query="{string}"
       source-field="{string}"
       target-field="{string}"
       [measure="{string}"]
       [measure-field="{string}"]
       data="{object}"
       [title="{string}"]
       [subtitle="{string}"]
       [series-name="{string}"]
       [inverted="{boolean}"]
       [options="{object}"]>
</graph:flow>
```

### Directive info

* This directive creates new scope.

#### Parameters

| Param                       | Type        | Details                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| --------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| platform                    | **string**  | Name of the platform (Required if not using `data` attribute).                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| query                       | **string**  | Name of the query (Required if not using `data` attribute).                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| source-field                | **string**  | Name of a primary field to facet on (for example "Country"). The values of this facet will define the set of graph nodes with outgoing edges. (Required if not using `data` attribute).                                                                                                                                                                                                                                                                                                                           |
| target-field                | **string**  | Name of a secondary field to facet on (for example "City"), for every facet value of the primary field. The values of this facet will define the set of graph nodes with incoming edges. For example, say the primary facet (source-field) has values for Country=Germany and Country=France and the secondary facet (target-field) has values for City=Berlin, City=Munich and City=Paris. Then we add graph edges Germany-→Berlin, Germany-→Munich and France-→Paris. (Required if not using `data` attribute). |
| measure  *(optional)*       | **string**  | Name of a numerical measure that defines the weight of each graph edge. When omitted, this defaults to the counts of the facets defined by the target-field. Some possible measures include "sum", "mean" and "min". (Only applicable if not using `data` attribute).                                                                                                                                                                                                                                             |
| measure-field  *(optional)* | **string**  | Field to measure, when the "measure" option is specified.                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| data                        | **object**  | Array of arrays containing the data to render the sankey chart. In the format of `['from', 'to', 'weight']`  `[   ['Spain', 'Portugal', 100]   ['Spain', 'Brazil', 300] ]`  (Required if not using the `platform` attribute)                                                                                                                                                                                                                                                                                      |
| title  *(optional)*         | **string**  | Chart title                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| subtitle  *(optional)*      | **string**  | Chart sub title                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| series-name  *(optional)*   | **string**  | The name of the series.  *(default: '')*                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| inverted  *(optional)*      | **boolean** | Whether the chart should be inverted.  *(default: true)*                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| options  *(optional)*       | **object**  | Extend the current options. Options can be found [here.](http://api.highcharts.com/highcharts/)                                                                                                                                                                                                                                                                                                                                                                                                                   |