# Dynamic shading with Netdata dashboard graphs

**URL:** <https://community.netdata.cloud/t/dynamic-shading-with-netdata-dashboard-graphs/508>\
**Category:** Help\
**Tags:** agent, cloud-ui\
**Created:** [November 23, 2020, 8:00pm UTC](https://community.netdata.cloud/t/dynamic-shading-with-netdata-dashboard-graphs/508 "2020-11-23T20:00:56Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![dave\_s](https://yyz1.discourse-cdn.com/flex029/user_avatar/community.netdata.cloud/dave_s/32/186_2.png) [@dave\_s](https://community.netdata.cloud/u/dave_s)\
**Post date:** [November 23, 2020, 8:00pm UTC](https://community.netdata.cloud/t/dynamic-shading-with-netdata-dashboard-graphs/508/1 "2020-11-23T20:00:56Z")

</div>

We are looking to represent the state of a system component on one of our network throughput graphs on a custom dashboard. An ideal solution would apply shading to the area of a graph, based on the value of a dimension within the chart.

Here is an example of what I am describing.  
Say we have one throughput chart (kbps) with two dimensions: `received`, `component`.

- `received` is displayed as usual with real values
- `component` is treated as a boolean by our collector: 1 kbps for `true` and `0 kbps` for false  
When `component` is reporting `true`, shading is applied to the graph

For an example of shading, we are looking for something similar to the link below.  
[https://rstudio.github.io/dygraphs/gallery-annotations.html#shading](https://rstudio.github.io/dygraphs/gallery-annotations.html#shading)

Is it possible to achieve something like this with the existing Netdata solution?

---

<div class="post-metadata">

**Author:** ![OdysLam](https://yyz1.discourse-cdn.com/flex029/user_avatar/community.netdata.cloud/odyslam/32/98_2.png) [@OdysLam](https://community.netdata.cloud/u/OdysLam)\
**Post date:** [November 24, 2020, 9:19am UTC](https://community.netdata.cloud/t/dynamic-shading-with-netdata-dashboard-graphs/508/2 "2020-11-24T09:19:48Z")

</div>

Hey @dave_s,

Welcome to our community! I hope you do enjoy your stay here 🙂

1. As far as I know, this is not possible with the current implementation. You would need to customize the dashboard with custom JS code. I am not sure how easy that would be, so pinging @Jacek_Kolasa to give us more context!
2. If you believe that we should offer such functionality, you can create a topic on #feature-requests:agent-fr so that people can vote on it. If it receives enough votes, it is very possible that our product team will prioritize it!

Cheers 🙂

---

<div class="post-metadata">

**Author:** ![Jacek\_Kolasa](https://yyz1.discourse-cdn.com/flex029/user_avatar/community.netdata.cloud/jacek_kolasa/32/190_2.png) [@Jacek\_Kolasa](https://community.netdata.cloud/u/Jacek_Kolasa)\
**Post date:** [November 24, 2020, 12:07pm UTC](https://community.netdata.cloud/t/dynamic-shading-with-netdata-dashboard-graphs/508/3 "2020-11-24T12:07:31Z")

</div>

Hi @dave_s!

Currently we don’t support this, unfortunately. In the future, we could do this by having 2 dimensions on one chart, one of which would be boolean, and we would have to have 2 kinds of charts (area and line) in one chart. This approach however is not possible yet in dygraph.js library we are using, so would would have also to move to some different charting solution. But that’s a very nice idea, though, thanks for bringing it up!

---

<div class="post-metadata">

**Author:** ![dave\_s](https://yyz1.discourse-cdn.com/flex029/user_avatar/community.netdata.cloud/dave_s/32/186_2.png) [@dave\_s](https://community.netdata.cloud/u/dave_s)\
**Post date:** [November 24, 2020, 9:49pm UTC](https://community.netdata.cloud/t/dynamic-shading-with-netdata-dashboard-graphs/508/4 "2020-11-24T21:49:08Z")

</div>

Thanks for getting back to me @Jacek_Kolasa.

---

<div class="post-metadata">

**Author:** ![OdysLam](https://yyz1.discourse-cdn.com/flex029/user_avatar/community.netdata.cloud/odyslam/32/98_2.png) [@OdysLam](https://community.netdata.cloud/u/OdysLam)\
**Post date:** [November 25, 2020, 9:44pm UTC](https://community.netdata.cloud/t/dynamic-shading-with-netdata-dashboard-graphs/508/5 "2020-11-25T21:44:51Z")

</div>

@dave_s don’t forget to mark the answer that solved your problem as the solution!

Click on the three dots on the answer and then on the box that says solution
