top of page
Logo of top retool developers and retool agency

Creating a Stacked Bar Chart using PlotlyJS in Retool



Ready to level up your internal tools game? Today, we're exploring the world of retool bar charts using PlotlyJS. If you're a product or engineering director looking to visualize data like a pro, this is for you.


In this guide, we'll walk you through creating stacked bar charts in Retool using PlotlyJS. You'll learn how to configure JSON properties, set up your data, and create interactive, visually appealing charts that'll make your team go "Wow!"


Let's break down what we're covering:

  • Setting up PlotlyJS in Retool

  • Configuring stacked bar charts with JSON

  • Defining and customizing your data

  • Connecting to data sources

  • Tips and tricks for chart mastery

Ready to chart your way to success? Let's dive in!



Initial Setup and Configuration


First, get plotlyJS up and running in Retool. It's easier than you might think!

  1. Head to your Retool dashboard.

  2. Drag and drop the Plotly component onto your canvas.

  3. You're ready to start configuring.


Now, let's talk about JSON. PlotlyJS uses a JSON structure to define your chart's properties. Don't worry if you're not a JSON expert – we'll walk you through it step by step.


Why does this matter to you? By mastering this setup, you'll be able to create powerful, customizable charts that bring your data to life. Imagine impressing your team with visuals that make decision-making a breeze! 


And if you ever need expert assistance, the team at Toolpioneers is just a call away to support your data visualization needs!


Now that we've got the basics down, let's move on to the fun part – configuring your stacked bar chart.


Configuring the Stacked Bar Chart

Time to make your chart stack up. We'll focus on two key properties: 'barmode' and 'barnorm'.


Here's what you need to know:

  • 'barmode: stack' tells PlotlyJS to stack your bars.

  • 'barnorm: percent' transforms your chart into a 100% stacked bar chart.

Add these to your JSON like this:

Json

{

  "data": [...],

  "layout": {

    "barmode": "stack"

  }


Why is this awesome? Stacked charts let you compare total amounts across categories while also showing the composition of each category. With these properties, you're on your way to creating charts that tell a complete story at a glance. Next up, let's dive into defining your data.


Data Definition and Properties


Here's what you need to define in your data:

  • 'name': What each data series represents

  • 'type': Set this to 'bar' for a bar chart

  • 'x' and 'y': Your axes data

  • 'hovertemplate': Customize what shows on hover

  • 'transforms': For sorting and aggregating data

  • 'marker': Set colors and other visual properties


Here's a snippet to get you started:

json

{

  "data": [

    {

      "type": "bar",

      "name": "Series 1",

      "x": ["January", "February", "March"],

      "y": [10, 15, 13],

      "hovertemplate": "%{x}: %{y}<extra></extra>",

      "marker": {

        "color": "blue"

      }

    },

    {

      "type": "bar",

      "name": "Series 2",

      "x": ["January", "February", "March"],

      "y": [12, 18, 11],

      "hovertemplate": "%{x}: %{y}<extra></extra>",

      "marker": {

        "color": "red"

      }

    }

  ],

  "layout": {

    "barmode": "stack"

  }

}


Why is this crucial? By fine-tuning these properties, you're creating charts that are not just visually appealing but also informative and interactive. Your team will be able to glean insights quickly and easily.


Speaking of insights, let's look at a full example to bring it all together.


Full Plotly JSON Example


Ready for the grand finale? Here's a comprehensive JSON configuration for a stacked bar chart:

json

{

  "data": [

    {

      "type": "bar",

      "name": "Billable Hours",

      "x": ["January", "February", "March"],

      "y": [50, 60, 55],

      "hovertemplate": "Billable: %{y}<extra></extra>",

      "marker": {

        "color": "green"

      }

    },

    {

      "type": "bar",

      "name": "Unbillable Hours",

      "x": ["January", "February", "March"],

      "y": [20, 30, 25],

      "hovertemplate": "Unbillable: %{y}<extra></extra>",

      "marker": {

        "color": "orange"

      }

    }

  ],

  "layout": {

    "barmode": "stack",

    "title": "Monthly Hours Breakdown",

    "xaxis": {

      "title": "Month"

    },

    "yaxis": {

      "title": "Hours"

    }

  }

}


This example shows a monthly breakdown of billable vs. unbillable hours. It's perfect for service-based businesses looking to track productivity and profitability.


Why is this valuable? With this level of detail, you're not just presenting data – you're telling a story. Your team can instantly see trends, make comparisons, and draw insights that drive decision-making.


Now that we've got our chart configured, let's talk about getting your data into Retool.


Querying Data Source


Charts are only as good as the data they represent. Here's how to connect your chart to live data:

  1. Set up a database query in Retool.

  2. Use the query results to populate your chart's data.

  3. Transform the data if needed using JavaScript.


For example:

javascript

const queryData = {{ yourDatabaseQuery.data }};

const chartData = [

  {

    name: 'Billable Hours',

    x: queryData.map(item => item.month),

    y: queryData.map(item => item.billable_hours),

    type: 'bar',

    marker: { color: 'green' }

  },

  {

    name: 'Unbillable Hours',

    x: queryData.map(item => item.month),

    y: queryData.map(item => item.unbillable_hours),

    type: 'bar',

    marker: { color: 'orange' }

  }

];

return { data: chartData };


By connecting to live data sources, your charts become dynamic, real-time visualizations of your business metrics. No more outdated reports – just up-to-the-minute insights at your fingertips.


Ready to take your charts to the next level? Let's explore some additional resources.


Additional Help and Resources


PlotlyJS is incredibly powerful, with a wealth of features to explore. Here are some tips to supercharge your chart creation:

  • Check out the PlotlyJS examples gallery for inspiration.

  • Dive into the documentation for advanced properties.

  • Experiment with different chart types to find what works best for your data.


The key to great charts is iteration. Don't be afraid to play around and see what works best for your specific needs.


By leveraging these resources, you'll be able to create charts that not only look great but also provide meaningful insights to drive your business forward.


Community Support


Exciting discussions are happening around future charting features in Retool. Keep an eye out for new developments that could take your visualizations to the next level!


Why does this matter to you? By staying connected with the community, you'll be at the forefront of new techniques and features, ensuring your tools are always cutting-edge.


Toolpioneers, with their deep involvement in the Retool ecosystem, can keep you updated and ahead of the curve!


Conclusion


And there you have it – your guide to creating stunning retool bar charts using PlotlyJS! Let's recap what we've covered:

  • Setting up PlotlyJS in Retool

  • Configuring stacked bar charts with JSON

  • Defining and customizing your data

  • Connecting to live data sources

  • Leveraging additional resources and community support


With these skills in your toolkit, you're well-equipped to create powerful, insightful visualizations that will transform how your team interprets data.


Great charts are tools for understanding, decision-making, and driving your business forward. So go forth and create charts that not only look good but also provide real value to your team and organization.


Ready to take your internal tools to the next level? At Toolpioneers, we specialize in creating custom Retool applications that bring your data to life. Whether you're looking to build complex dashboards or streamline your operations, we've got the expertise to make it happen.


Don't let your data go to waste – let's turn it into actionable insights together. Reach out to Toolpioneers today and let's chart a course for success! 


bottom of page