Screen 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 to provide in-line styling to plugin markup to achieve your desired effect.

You may also included 3rd party libraries, for example Highcharts, to create data visualizations like charts and graphs.

Quickstart

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

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 Private Plugin > Markup field, the following screen will be rendered:

Un-styled chart example

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

Here's another line chart with TRMNL-friendly styling:

Styled line chart example

Get all the code + learn how to do this here: https://usetrmnl.com/framework/chart

More Charts and Graphs

Our Framework docs are the best place for the latest examples and tips to improve the look and feel of graphical embeds from 3rd party tools like Highcharts.