One option to configure the color palette to respond to flexdashboard filters without using Shiny is to use CSS and JavaScript.
Here's an example:
```{css} :root { --color-1: #e6194B; --color-2: #3cb44b; --color-3: #ffe119; --color-4: #0082c8; --color-5: #f58231; --color-6: #911eb4; --color-7: #46f0f0; --color-8: #f032e6; --color-9: #d2f53c; --color-10: #fabebe; }
2. Next, use JavaScript to listen for changes in the filters and dynamically update the CSS variables that define the color palette. For example:
```{js}
$(document).on("shiny:connected", function(event) {
var filters = $(".filter-input");
filters.on("change", function() {
var filterValues = {};
filters.each(function() {
var filterName = $(this).attr("data-filter");
var filterValue = $(this).val();
filterValues[filterName] = filterValue;
});
// Update the CSS variables that define the color palette
for (var filterName in filterValues) {
var filterValue = filterValues[filterName];
var variableName = "--color-" + filterName;
var variableValue = getColorForFilterValue(filterValue);
document.documentElement.style.setProperty(variableName, variableValue);
}
});
});
function getColorForFilterValue(filterValue) {
// Define the color mappings for each possible filter value
var colorMappings = {
"Value 1": "#e6194B",
"Value 2": "#3cb44b",
"Value 3": "#ffe119",
"Value 4": "#0082c8",
"Value 5": "#f58231"
};
// Return the color for the given filter value
return colorMappings[filterValue];
}
{css}
.chart {
color: var(--color-1);
}
This will allow the color of the chart to change dynamically based on the selected filter value.
Asked: 2021-08-29 11:00:00 +0000
Seen: 11 times
Last updated: Jun 01 '21