TRMNL API
HomeBuy a Device
  • 👋Overview
  • How it Works
  • Private Plugins
    • Screen Templating
    • Screen Templating (Graphics)
    • Create a screen
  • Reusing Markup
  • DIY TRMNL (Advanced)
    • Introduction
    • BYOD
    • BYOD/S
    • BYOS
  • ImageMagick Guide
  • Plugin Marketplace
    • Introduction
    • Plugin Creation
    • Plugin Installation Flow
    • Plugin Management Flow
    • Plugin Screen Generation Flow
    • Plugin Uninstallation Flow
    • Going Live
  • Private API
    • Introduction
    • Fetch Screen Content
    • Fetch Plugin Content
    • Account API
  • Partners API
    • Introduction
    • Getting Started
    • Provisioning Devices
Powered by GitBook
On this page
  • Overview
  • Quickstart
  • More Charts and Graphs
  1. Private Plugins

Screen Templating (Graphics)

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

PreviousScreen TemplatingNextCreate a screen

Last updated 6 months ago

Overview

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

As we extend , 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 , 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/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>

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

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

More Charts and Graphs

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

Get all the code + learn how to do this here:

Our 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.

growing plugin directory
native components
Highcharts
Private Plugin
https://usetrmnl.com/framework/chart
Framework docs
Un-styled chart example
Styled line chart example