Visualisations

Press can embed charts and visualisations directly in documents. Visualisations blend seamlessly into the layout and can be driven by data.

Donut and Pie Charts

The <x-donut> element renders donut or pie charts:

<x-donut width="150pt" height="150pt" stroke="14pt">
  <data>
    <item color="#1e3a5f" value="45" />
    <item color="#2563eb" value="30" />
    <item color="#93c5fd" value="25" />
  </data>
</x-donut>

Attributes

Attribute	Description
width	Chart width
height	Chart height
stroke	Ring thickness (larger values = thicker ring, 0 = pie chart)

Data Items

Each <item> in the <data> block takes:

Attribute	Description
color	Segment colour
value	Numeric value (proportional sizing)

Data limit

Use limit and limit-color to set the upper limit of data. For instance, we may want to set maximum progress to 100. The following will render all items, and then fill the rest of the chart up to the 100 value limit with the limit-color:

<x-donut width="150pt" height="150pt" stroke="16pt">
  <data limit="100" limit-color="#d1d5db">
    <item color="#1e3a5f" value="45" />
    <item color="#2563eb" value="30" />
    <item color="#059669" value="12" />
  </data>
</x-donut>

Donut Chart with Legend

A common pattern -- pair the chart with a legend table:

<frame direction="row" h-align="center" v-align="center"
       space-before-desired="12pt" space-after-desired="12pt">
  <x-donut height="128pt" stroke="12pt">
    <data>
      <item color="#1e3a5f" value="55" />
      <item color="#2563eb" value="30" />
      <item color="#93c5fd" value="15" />
    </data>
  </x-donut>
  <frame width="8pt" />
  <table style="@borderless">
    <tr>
      <td><frame background-color="#1e3a5f" border-radius="2pt"
                  width="24pt" height="12pt" /></td>
      <td>Completed (55%)</td>
    </tr>
    <tr>
      <td><frame background-color="#2563eb" border-radius="2pt"
                  width="24pt" height="12pt" /></td>
      <td>In Progress (30%)</td>
    </tr>
    <tr>
      <td><frame background-color="#93c5fd" border-radius="2pt"
                  width="24pt" height="12pt" /></td>
      <td>Planned (15%)</td>
    </tr>
  </table>
</frame>

<styles>
  <alias name="borderless">
    <child name="td">
      <border-weight>0</border-weight>
      <padding>4pt</padding>
    </child>
  </alias>
</styles>

The <visualization> Element

INFO

Visualizations are a Pro feature

For data-driven charts, use <visualization> with a data binding:

<visualization data="data.chart" width="100%" height="300pt">
  <config>
    <colors>
      <color>#1e3a5f</color>
      <color>#2563eb</color>
      <color>#059669</color>
    </colors>
  </config>
  <line-plot />
</visualization>

The data attribute points to chart data defined in <data>.

CSV Data Source

Chart data can be provided as CSV using <data type="csv">:

<data type="csv" name="chart">
  Month,Revenue,Expenses,Profit
  Jan,4200,3100,1100
  Feb,4800,3400,1400
  Mar,5100,3200,1900
  Apr,4900,3600,1300
  May,5500,3300,2200
  Jun,5800,3500,2300
</data>

<visualization data="data.chart" width="100%" height="300pt">
  <config>
    <colors>
      <color>#1e3a5f</color>
      <color>#2563eb</color>
      <color>#059669</color>
    </colors>
  </config>
  <line-plot />
</visualization>

Line Plots

The <line-plot> element renders line graphs:

<line-plot data="data.time-series" width="100%" height="250pt" />

Legends

Generate a legend by iterating over visualisation groups:

<visualization data="data.chart" width="100%">
  <config>
    <colors>
      <color>#1e3a5f</color>
      <color>#2563eb</color>
      <color>#059669</color>
    </colors>
  </config>
  <line-plot height="300pt" />
  <legend direction="row">
    <repeat data="visualization.groups" item="group">
      <frame direction="row" padding-right="16pt">
        <frame width="12pt" height="12pt" background-color="{{ group.color }}" border-radius="2pt" />
        <frame padding-left="4pt" font-size="8pt">{{ group.name }}</frame>
      </frame>
    </repeat>
  </legend>
</visualization>

<data type="csv" name="chart">
  Month,Revenue,Expenses,Profit
  Jan,4200,3100,1100
  Feb,4800,3400,1400
  Mar,5100,3200,1900
  Apr,4900,3600,1300
  May,5500,3300,2200
  Jun,5800,3500,2300
</data>