Plotly Studio Experiment 3: Coloring Area Charts with AC vs PY Revenue per Employee

Blogs in this series are based on the early access preview version of Plotly Studio. Plotly Studio is an AI-powered desktop application by Plotly designed to automate the creation of professional data apps and visualizations.

This third experiment with Plotly Studio was inspired by two things:

  • A dashboard I built about six months ago using Dash, Plotly, and IBCS principles
  • A recent post by Art Tennick, who created an IBCS-compliant dashboard using Plotly Studio in just minutes

That last part got me thinking: what was his initial “Context and Goals”? Because that’s where things get interesting — and where the outcome depends heavily on how clearly you frame the setup.

My Goal for This Experiment

I set out to recreate a very specific dashboard:

  • A row of area charts, one for each employee
  • Each chart shows AC (actual) vs PY (previous year) revenue
  • Areas are colored based on performance (AC vs PY)
  • I wanted to mark minimum, maximum, start, and end AC values with dotted lines and labels

Yes, quite ambitious 😆 — but why not try?

To guide the generation, I described the layout in detail (see image 1), including how I imagined the cards and even mentioned “IBCS” a few times to help nudge Plotly Studio in that direction.

Generated Outline vs. My Intent

The result? The outline I got was definitely more aligned with what Plotly Studio thought I needed, rather than what I had in mind.

That’s one of the key learnings here: how you define “Context and Goals” dramatically shapes the output. And admittedly, I was a bit impatient and hit “Go ahead” when the area chart was mentioned.

What Went Right, What Needed Tweaking

As expected, the generated area chart colored the regions based on the final status of AC vs PY — but it didn’t handle intersections where the AC and PY lines crossed (image 2). That was a known issue from my previous attempt six months ago.

Back then, solving this manually took many, many hours. I had to calculate the exact intersection points, inject them into the data, and split the areas accordingly to get the coloring right.

This time, however, I explained the problem directly in the outline. And surprisingly — Plotly Studio pulled it off. It took just 5 minutes to get the basic coloring right, and a few more minutes to shade the areas between the lowest values and the x-axis in grey.

The end result? (image 3)
And you can also see my original outline in the top (blue) section.

A Quick Note on the First Auto-Generated Dashboard

While the area chart needed work, the initial dashboard generated by Plotly Studio (image 4) contained many useful charts — all created in just a matter of minutes. That part is still pretty amazing. 🚀