$(() => {
$('#chart').dxChart({
dataSource,
rotated: true,
barGroupPadding: 0.2,
argumentAxis: {
categories: ['Royal Houses'],
tick: {
visible: false,
},
},
title: {
text: 'The British Monarchy',
subtitle: 'An Abbreviated Timeline',
},
commonSeriesSettings: {
argumentField: 'monarch',
type: 'rangeBar',
rangeValue1Field: 'start',
rangeValue2Field: 'end',
ignoreEmptyPoints: true,
barOverlapGroup: 'monarchs',
minBarSize: 4,
},
seriesTemplate: {
nameField: 'house',
},
animation: {
enabled: false,
},
legend: {
title: 'Royal Houses',
verticalAlignment: 'bottom',
horizontalAlignment: 'center',
},
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.2.6/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/22.2.6/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="chart"></div>
</div>
</body>
</html>
#chart {
height: 440px;
}
const dataSource = [
{
monarch: 'Anne',
start: new Date(1701, 4, 1),
end: new Date(1714, 7, 1),
house: 'Stuart',
},
{
monarch: 'George I',
start: new Date(1714, 7, 1),
house: 'Hanover',
end: new Date(1727, 5, 11),
},
{
monarch: 'George II',
start: new Date(1727, 5, 11),
house: 'Hanover',
end: new Date(1760, 9, 25),
},
{
monarch: 'George III',
start: new Date(1760, 9, 25),
house: 'Hanover',
end: new Date(1820, 0, 29),
},
{
monarch: 'George IV',
start: new Date(1820, 0, 29),
house: 'Hanover',
end: new Date(1830, 5, 26),
},
{
monarch: 'William IV',
start: new Date(1830, 5, 26),
house: 'Hanover',
end: new Date(1837, 5, 20),
},
{
monarch: 'Victoria',
start: new Date(1837, 5, 20),
end: new Date(1901, 0, 22),
house: 'Hanover',
},
{
monarch: 'Edward VII',
start: new Date(1901, 0, 22),
house: 'Saxe-Coburg and Gotha',
end: new Date(1910, 4, 6),
},
{
monarch: 'George V',
start: new Date(1910, 4, 6),
house: 'Saxe-Coburg and Gotha',
end: new Date(1917, 5, 17),
},
{
monarch: 'George V',
start: new Date(1917, 5, 17),
house: 'Windsor',
end: new Date(1936, 0, 20),
},
{
monarch: 'Edward VIII',
start: new Date(1936, 0, 20),
house: 'Windsor',
end: new Date(1936, 11, 11),
},
{
monarch: 'George VI',
start: new Date(1936, 11, 11),
house: 'Windsor',
end: new Date(1952, 1, 6),
},
{
monarch: 'Elizabeth II',
house: 'Windsor',
start: new Date(1952, 1, 6),
end: new Date(2022, 8, 8),
},
{
monarch: 'Charles III',
house: 'Windsor',
start: new Date(2022, 8, 8),
end: new Date(),
},
{
house: 'Stuart',
start: new Date(1701, 4, 1),
end: new Date(1714, 7, 1),
monarch: 'Royal Houses',
},
{
end: new Date(1901, 0, 22),
house: 'Hanover',
start: new Date(1714, 7, 1),
monarch: 'Royal Houses',
},
{
start: new Date(1901, 0, 22),
end: new Date(1917, 5, 17),
house: 'Saxe-Coburg and Gotha',
monarch: 'Royal Houses',
},
{
house: 'Windsor',
start: new Date(1917, 5, 17),
end: new Date(),
monarch: 'Royal Houses',
},
];