using a Vis.js Timeline, I have a group timeline wherein I'm setting the background color of the group, but the color is over-riding the vis-grid minor/major gridlines such that they don't show.
My group className is "Baseline" and I've tried CSS .vis-time-axis.baseline .vis-grid.vis-minor.baseline with no luck...
I've tried all sorts of other CSS trickery but can't get the minor/major gridlines to show. Here is my code. Help is appreciated!
var groups = new vis.DataSet([
{ id: 0, content: 'Solution #0', value: 0, className: "baseline" },
{ id: 1, content: 'Solution #1', value: 1 },
]);
var items = new vis.DataSet([
{ id: 0, group: 0, content: 'AAA', start: new Date(2020, 04, 06), end: new Date(2020, 06, 01), type: 'range' },
{ id: 1, group: 0, content: 'BBB', start: new Date(2020, 04, 06), end: new Date(2020, 04, 06), type: 'point' },
{ id: 2, group: 0, content: 'CCC', start: new Date(2020, 06, 15), end: new Date(2021, 09, 22), type: 'range' },
{ id: 22, group: 1, content: 'AAA', start: new Date(2020, 04, 06), end: new Date(2020, 06, 01), type: 'range' },
{ id: 23, group: 1, content: 'BBB', start: new Date(2020, 06, 15), end: new Date(2021, 09, 22), type: 'range' },
{ id: 24, group: 1, content: 'CCC', start: new Date(2021, 09, 22), end: new Date(2021, 09, 27), type: 'range' },
]);
var container = document.getElementById('visualization');
var options = {};
var timeline = new vis.Timeline(container,items,groups,options);body,
html {
font-family: sans-serif;
background-color: black;
}
.vis-item .vis-item-overflow {
overflow: visible;
}
.vis-group.baseline {
font-family: sans-serif;
font-style: italic;
font-size: 11pt;
background-color: #b1a3a3;
}
.baseline {
font-family: sans-serif;
font-style: italic;
font-size: 11pt;
}
.vis-time-axis .vis-text {
box-sizing: border-box;
color: #ffffff;
overflow: hidden;
padding: 3px;
position: absolute;
white-space: nowrap
}
.vis-time-axis .vis-grid.vis-minor {
border-color: #ececee
}<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis-timeline-graph2d.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js" rel="script"></script>
<body>
<div id="visualization"></div>
</body>