[docs][APM] Breakdown graph and screenshots (#41175)

docs/apm/transactions.asciidoc

@@ -5,13 +5,25 @@ TIP: A {apm-overview-ref-v}/transactions.html[transaction] describes an event ca
 The APM agents automatically collect performance metrics on HTTP requests, database queries, and much more.
 
 Selecting a <<services,*service*>> brings you to the *transactions* overview.
-The *transaction duration* and *requests per minute* chart display information on all transactions associated with the selected service.
+The *time spent by span type*, *transaction duration* and *requests per minute* chart display information on all transactions associated with the selected service.
 The *Transactions* table, however, provides only a list of _transaction groups_ for the selected service.
 In other words, this view groups all transactions of the same name together, and only displays one transaction for each group.
 
 [role="screenshot"]
 image::apm/images/apm-transactions-overview.png[Example view of transactions table in the APM UI in Kibana]
 
+*Time spent by span type* -- beta[] Certain agents support breakdown graphs in the APM UI.
+This graph is an easy way to visualize where your application is spending most of its time.
+For example, is your app spending time in external calls, database processing, or application code execution?
+
+The time a transaction took to complete is also recorded and displayed on the chart under the "app" label.
+"App" indicates that something was happening within the application, but we're not sure exactly what.
+This could be a sign that the agent does not have auto-instrumentation for whatever was happening during that time.
+
+It's important to note that if you have asynchronous spans, the sum of all span times may exceed the duration of the transaction.
+
+TIP: If the *Time spent by span type* chart is missing in the APM UI, it means your agent does not support this feature yet. 
+
 *Transaction duration* shows the response times for this service and is broken down into average, 95th, and 99th percentile.
 If there's a weird spike that you'd like to investigate,
 you can simply zoom in on the graph - this will adjust the specific time range,
@@ -44,9 +56,9 @@ refer to the documentation for each {apm-agents-ref}[APM Agent] you've implement
 ==== Transaction details
 
 Selecting a transaction group will bring you to the *transaction* details.
-Transaction details include a high-level overview of the transaction group duration,
-requests per minute, and transaction group duration distribution.
-It's important to note that all three of these graphs show data from every transaction within the selected transaction group. 
+Transaction details include a high-level overview of the time spent by span type,
+transaction group duration, requests per minute, and transaction group duration distribution.
+It's important to note that all of these graphs show data from every transaction within the selected transaction group.
 
 [role="screenshot"]
 image::apm/images/apm-transaction-response-dist.png[Example view of response time distribution]