The Mode example gallery features a variety of customizations you can apply to Mode charts, tables, and reports by editing the HTML. While you can customize the entirety of a Mode report—just like coding a web page—these examples provide quick wins for common modifications. We hope these examples provide inspiration for what’s possible using the HTML editor.
Step 1: Navigate to the HTML editor
Once you’ve run your SQL queries, click into the Report Builder and select “Edit HTML” to open the HTML editor.
Step 2: Add the stylesheet and script tag
Start by adding this code to the very top:
<link rel="stylesheet" href="https://mode.github.io/alamode/alamode.min.css">
Step 3: Add the customizable snippet
The next step is to drop in the customizable snippet. This is the block of code that allows you to indicate specific preferences for colors, font styles, dimensions, etc. It’s also where you’ll make a few tweaks to point the code to your dataset.
query_name: "2014 GSW Free Throw Percentage",
title: "Free throw shooting percentage",
bar_column: "Free Throw Percentage",
Step 4: Update the report
Click Update as you go to preview your work.
Share new customization ideas and your projects with the Mode community by emailing email@example.com or submit a pull request to the alamode.js repo on Github.