> For the complete documentation index, see [llms.txt](https://bb-docs.gitbook.io/bubweb-doc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bb-docs.gitbook.io/bubweb-doc/help-guide/getting-started/charts/dumbbell.md).

# Dumbbell

### Chart Dumbbell

{% embed url="<https://codesandbox.io/s/bubweb-chart-timeline-x5ksgw?file=/index.html:0-3655>" %}

### Example of a static dumbbell chart

All I did was make the hexadecimal **colors** and the chart **list dynamic**

{% code lineNumbers="true" %}

```html
<!DOCTYPE html>
<html>
  <head>
    <script>
      window.onload = function () {
        var options = {
          series: [
            {
              data: [
                {
                  x: "Planning",
                  y: [
                    new Date("2019-03-02").getTime(),
                    new Date("2019-03-06").getTime()
                  ]
                },
                {
                  x: "Analysis",
                  y: [
                    new Date("2019-03-03").getTime(),
                    new Date("2019-03-05").getTime()
                  ]
                },
                {
                  x: "Development",
                  y: [
                    new Date("2019-03-02").getTime(),
                    new Date("2019-03-19").getTime()
                  ]
                },
                {
                  x: "Testing",
                  y: [
                    new Date("2019-03-03").getTime(),
                    new Date("2019-03-09").getTime()
                  ]
                },
                {
                  x: "Validation",
                  y: [
                    new Date("2019-03-04").getTime(),
                    new Date("2019-03-06").getTime()
                  ]
                },
                {
                  x: "Deployment",
                  y: [
                    new Date("2019-03-08").getTime(),
                    new Date("2019-03-16").getTime()
                  ]
                },
                {
                  x: "Maintenance",
                  y: [
                    new Date("2019-03-05").getTime(),
                    new Date("2019-03-14").getTime()
                  ]
                }
              ]
            }
          ],
          chart: {
            toolbar: {
              show: false
            },
            height: 390,
            type: "rangeBar",
            zoom: {
              enabled: false
            }
          },
          colors: ["#4f46e5", "#50CD89"],
          plotOptions: {
            bar: {
              horizontal: true,
              isDumbbell: true,
              barHeight: "10%",
              dumbbellColors: [["#4f46e5", "#50CD89"]]
            }
          },
          xaxis: {
            type: "datetime",
            labels: {
              format: "dd, MMM",
              style: {
                colors: "#9CA3AF"
              }
            },
            axisBorder: {
              show: false
            }
          },
          yaxis: {
            labels: {
              style: {
                colors: "#9CA3AF"
              }
            }
          },
          legend: {
            show: true,
            showForSingleSeries: true,
            position: "top",
            horizontalAlign: "left",
            customLegendItems: ["Start", "Done"]
          },
          fill: {
            type: "gradient",
            gradient: {
              gradientToColors: ["#50CD89"],
              inverseColors: false,
              stops: [0, 100]
            }
          },
          grid: {
            borderColor: "#E5E7EB",
            strokeDashArray: 7,
            xaxis: {
              lines: {
                show: true
              }
            },
            yaxis: {
              lines: {
                show: false
              }
            }
          }
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
      };
    </script>
  </head>
  <body>
    <div id="chart" style="width: 95%;"></div>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  </body>
</html>

```

{% endcode %}

<figure><img src="/files/gLXWA8jwMnpr0KO90hnw" alt=""><figcaption></figcaption></figure>

#### Content to show per list item

**Series**

```
{x: '', y: ['', '']}
```
