Dumbbell
Setting up the chart
Chart Dumbbell
Example of a static dumbbell chart
All I did was make the hexadecimal colors and the chart list dynamic
<!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>
Content to show per list item
Series
{x: '', y: ['', '']}Last updated