From 6e04ca61d139d46de05ea0738f5ba725c7621769 Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Fri, 13 Dec 2019 16:11:17 +0200
Subject: [PATCH] Adjust chart legend styles
---
.../components/facet_bar/ChartDialog.js | 23 ++++++++++++++++++-
src/client/index.html | 10 ++++++++
2 files changed, 32 insertions(+), 1 deletion(-)
diff --git a/src/client/components/facet_bar/ChartDialog.js b/src/client/components/facet_bar/ChartDialog.js
index 85a3c7ed..800174e5 100644
--- a/src/client/components/facet_bar/ChartDialog.js
+++ b/src/client/components/facet_bar/ChartDialog.js
@@ -51,9 +51,30 @@ const ChartDialog = props => {
legend: {
position: 'right',
width: 400,
- fontSize: 14,
+ fontSize: 16,
itemMargin: {
horizontal: 5
+ },
+ onItemHover: {
+ highlightDataSeries: false
+ },
+ onItemClick: {
+ toggleDataSeries: false
+ },
+ markers: {
+ width: 18,
+ height: 18,
+ },
+ formatter: (seriesName, opts) => {
+ return `${seriesName} [${opts.w.globals.series[opts.seriesIndex]}]`;
+ }
+ },
+ tooltip: {
+ //enabled: false,
+ followCursor: false,
+ fixed: {
+ enabled: true,
+ position: 'topRight'
}
}
}}
diff --git a/src/client/index.html b/src/client/index.html
index e23b0241..39d1f1f4 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -51,6 +51,16 @@
.ReactVirtualized__Grid {
outline: none;
}
+ .apexcharts-legend {
+ box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),
+ 0px 1px 1px 0px rgba(0,0,0,0.14),
+ 0px 1px 3px 0px rgba(0,0,0,0.12);
+ transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+ }
+ .apexcharts-legend-marker {
+ top: 3px !important;
+ }
</style>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
--
GitLab