📊Plugin Templating (Graphics)

Go deeper with custom screen styling, data visualization, and more.

Overview

The TRMNL design system is actively improving to suit the needs of our growing plugin directory and requests from developers like you.

As we extend native components, you are welcome (although not "encouraged") to provide in-line styling to plugin markup to achieve your desired effect.

On a limited basis you may also included 3rd party libraries, for example Highcharts, to create data visualizations such as charts and graphs.

Quickstart

Here's some example Markup content that will render a line chart:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartkick@5.0.1/dist/chartkick.min.js"></script><div class="screen">

<div class="layout">
  <div id="container">
  </div>
</div>
<script>
Highcharts.chart("container", {
    title: {
        text: "Chart demo"
    },
    credits: { enabled: false },
    xAxis: {
        tickInterval: 1,
        type: "logarithmic"
    },
    yAxis: {
        type: "logarithmic",
        minorTickInterval: 0.1,
    },
    tooltip: {
        headerFormat: "<b>{series.name}</b><br />",
        pointFormat: "x = {point.x}, y = {point.y}"
    },
    series: [{
        data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
        pointStart: 1
    }]
});
</script>

If this is saved into a Custom Plugin > Markup field, the following screen will be rendered:

Un-styled chart example

As you can see, this isn't pretty (yet).

Styling Charts and Graphs

Soon we'll provide tips to improve the look and feel of 3rd party embeds like Highcharts.

In the meantime, check out this Robinhood demo (requires TRMNL login). Inspect element and look for the <script> tag above the <div> with class "title_bar" for hints.