subhash-halder contributed quadrant charts so you can show your manager what to select – just like the strategy consultants at BCG do
• 7 mins
A quadrant chart is a useful diagram that helps users visualize data and identify patterns in a data set.
Whether you’re analyzing market trends, customer behavior or product performance, a quadrant chart enables you to determine how different elements stack up against each other. By mapping data points in relation to two variables, you’ll be able to group these data points into four distinct quadrants. Hence the name: quadrant chart.
While easy to read, quadrant charts have traditionally been challenging to produce. A diagram is only effective if it can be easily built and edited, which is why we made the quadrant chart available in Mermaid, the text-based diagramming platform built on top of Mermaid.js.
We owe a special thanks to Subhash Halder, aka @subhash-halder, a software engineer from India and a member of our Mermaid community. In the true spirit of open source, Subhash contributed the 4 quadrant chart and wrote the code for this functionality.
Let’s take a deeper look at quadrant charts and show you how easy it is to produce your own in (Mermaid), for free:
What is a quadrant chart?
A quadrant chart is a visual representation of a data set that’s divided into four quadrants. Often called a 4 quadrant chart, this diagram is used to plot data points on a two-dimensional grid, with one variable presented on the x-axis and another represented on the y-axis. The chart is divided into four equal parts based on a set of criteria that is specific to the data being analyzed.
A 4 quadrant chart is typically used to identify patterns and trends and to prioritize actions based on the position of data points within the chart. Any profession can use a quadrant chart, but they are often associated with business, marketing and risk management.
What can I use a 4 quadrant chart for?
You can use a quadrant chart anytime you’re hoping to determine how a set of data points relates to two different variables.
Here are a few examples, grouped by profession:
Developers: Technology pre-study quadrant chart
It’s often useful to use quadrant charts during a pre-study, when you’re determining which tool might be the most effective for your use case. For example, you could put “Affordability” on the x-axis and “Scalability” on the y-axis.
By charting your data points, you could determine which platform gives you the right mix of financial value and ability to integrate with your existing systems.
Business Development: Sales performance quadrant chart
Sales managers must constantly track the performance of their team against their revenue and deal goals. The manager could use the x-axis to represent the amount of revenue generated, while the y-axis could signify the number of deals closed. Using the chart, the manager can quickly identify which team members exceed expectations and which might need additional training or support.
Customer Success: Customer satisfaction quadrant chart
In this case, a customer success manager could use the x-axis to represent a customer’s Net Promoter Score (NPS), while the y-axis could represent the number of complaints received. The resulting four quadrants could be labeled “Highly Satisfied,” “Moderately Satisfied,” “Moderately Dissatisfied” and “Highly Dissatisfied.” When juggling a number of accounts, the CS manager would be able to identify which customers need extra attention.
Investors: Risk vs. reward quadrant chart
Financial analysts often like to diversify their portfolios, mixing safer/long-term assets with high-upside/high-volatility plays. These analysts could plot their investments with a quadrant chart; the x-axis shows the risk factor, while the y-axis shows the potential reward. This would give the analyst a simple view into how they’ve grouped their investments — and if they should take action to increase or decrease their risk level.
How to make a quadrant chart with Mermaid
Making a quadrant chart in Mermaid begins with six easy steps:
1. Create a Mermaid Chart account
2. Create a project
3. Start a new diagram
4. Select “quadrant chart” from the sample diagram menu.
5. Input your data.
6. Save, share and revise.
1) Create a Mermaid accOUNT
Head over to https://mermaid.ai/ and create your free account. The Basic (free) tier is all you need to get started on your quadrant chart.
If you’re looking for more Mermaid functionality, upgrading to our Plus plan gives you unlimited diagrams, limitless diagram size, 300 AI credits per year, and view & comment collaboration.
2) Create a project
Once you’ve joined the Mermaid community, you’ll need to get your workspace started. Basic (free) users can get started in the “personal” project space, while Premium users can create additional projects to group their work by topic.
3) Start a new diagram
Enter your workspace and click “+New Diagram” on the top right of the screen.
4) Select “quadrant chart” from the sample diagram menu
Mermaid comes pre-built with dozens of sample diagrams: flow charts, class, state, mindmap, etc. Select “quadrant chart” to get yourself started.
5) Input your data
Mermaid makes it easy. Custom label your x and y-axes, the name of each quadrant and the name of each campaign data point. Adjust the location of each data point by changing the value of the numbers listed. The data points are presented in an x,y format, and each axis operates on a scale of 0.00-0.99. A point directly in the center of the graph would read: Data Point A: [0.5, 0.5].
6) Save, share and revise
On the top right of your screen, you’ll see buttons to save and export your diagram as a PNG or SVG file. The “Timeline” button lets you see your version history and revert the diagram to a previous version, if necessary. You can get a diagram link to share your diagram with others. Premium users can work on the diagram together with the rest of their team.
Pretty easy, right? If you’re looking for more information about using Mermaid to build your next quadrant chart, check out the (in-depth guide here).
Best practices for creating a 4 quadrant chart
Now that you know how to use Mermaid to make your next quadrant chart, it’s important to remember a few key tips before you start whipping up diagrams from text:
select your axes carefully
Remember that the purpose of a 4 quadrant chart is to communicate how different data points relate to two distinct variables. Make sure that your two axes are representing the most vital information. Before you start charting your data points, ask yourself: what am I trying to communicate to my audience?
Don’t have too many data points
The best diagrams are easy to read. A cluttered chart can make it difficult for viewers to understand the data, defeating the purpose of the chart in the first place. We recommend limiting your quadrant chart to 7-10 data points. This way, your audience can see the comparison without being overwhelmed by the number of dots they’re trying to digest.
Make multiple quadrant charts
It’s often difficult to reduce a complex decision down to two variables. The beauty of using Mermaid is that it’s easy to make multiple quadrant charts if you have to account for a wide variety of variables. For example, if you’re contemplating options for a new software platform, you might chart “Price vs. Scalability” on one quadrant chart and “Price vs. Number of Features” on another. While you don’t need to have 100 charts for each decision, it’s often nice to look at multiple charts that communicate different factors about each data point.
Ready to easily build your next quadrant chart from Markdown-style text? Sign up with Mermaid to discover the easiest way to make an effective quadrant chart.