Chart

With careful, minimal styling choices, TRMNL can display a variety of numerical or time centric content as charts and graphs.

Usage

Any CDN-enabled JavaScript library may be used to develop charting interfaces, however the examples below leverage Highcharts and Chartkick.

Line Chart

This single series line chart matches the calm approach of TRMNL plugins generally. Grid lines are dashed, primary metrics are bolded, and there are no superfluous tooltips or a messy legend to distract the visual hierarchy.

25,388 Pageviews
4,771 Visitors
2.23 Mins on Page
Simple Analytics usetrmnl.com 
<!-- import Highcharts + Chartkick libraries -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartkick.min.js"></script>

<!-- markup with empty, ID'd element for chart injection -->
<div class="view view--full">
  <div class="layout layout--col gap--space-between">
    <div class="grid grid--cols-3">
      <div class="item">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--tnums">25,388</span>
          <span class="label">Pageviews</span>
        </div>
      </div>
      <div class="item">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--tnums">4,771</span>
          <span class="label">Visitors</span>
        </div>
      </div>
      <div class="item">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--tnums">2.23</span>
          <span class="label">Mins on Page</span>
        </div>
      </div>
    </div>

    <div id="chart-123" style="width: 100%"></div>
  </div>

  <div class="title_bar">
    <img class="image" src="https://usetrmnl.com/images/plugins/simple-analytics--render.svg" />
    <span class="title">Simple Analytics</span>
    <span class="instance">usetrmnl.com</span>
  </div>
</div>

<script type="text/javascript">
  var data = [["2024-06-09", 975],["2024-06-10", 840],["2024-06-11", 1004],["2024-06-12", 1308],["2024-06-13", 753],["2024-06-14", 600],["2024-06-15", 710],
              ["2024-06-16", 489],["2024-06-17", 510],["2024-06-18", 590],["2024-06-19", 610],["2024-06-20", 671],["2024-06-21", 512],["2024-06-22", 550],
              ["2024-06-23", 421],["2024-06-24", 315],["2024-06-25", 604],["2024-06-26", 672],["2024-06-27", 601],["2024-06-28", 705],["2024-06-29", 800],
              ["2024-06-30", 912],["2024-07-01", 1503],["2024-07-02", 1273],["2024-07-03", 1250],["2024-07-04", 1198],["2024-07-05", 1005],["2024-07-06", 1300],
              ["2024-07-07", 1103],["2024-07-08", 1004],["2024-07-09", 600]];

  // recommended configs to achieve the TRMNL Framework aesthetic
  var createChart = function() {
    new Chartkick["LineChart"](
    "chart-123",
    data,
    {
      adapter: "highcharts", // chartjs, google, etc available
      prefix: "",
      thousands: ",",
      points: false,
      colors: ["black"],
      curve: true,
      library: {
        chart: {
          height: 260
        },
        plotOptions: {
          series: {
            animation:false, lineWidth: 4
          }
        },
        yAxis: {
          labels: {
            style: {
              fontSize: "16px",
              color:"#000000"
            }
          },
          gridLineDashStyle: "shortdot",
          gridLineWidth: 1,
          gridLineColor: "#000000",
          tickAmount: 5
        },
        xAxis: {
          type: "daytime",
          labels: {
            style: {
              fontSize: "16px",
              color: "#000000"
            }
          },
          lineWidth: 0,
          gridLineDashStyle: "dot",
          tickWidth: 1,
          tickLength: 0,
          gridLineWidth: 1,
          gridLineColor: "#000000",
          tickPixelInterval: 120
        }
      }
    });
  };

  // ensure your chart loads before plugin render is generated
  if ("Chartkick" in window) {
    createChart();
  } else {
    window.addEventListener("chartkick:load", createChart, true);
  }
</script>