Fix legend rendering.

This commit is contained in:
Mike Cao 2020-10-15 09:10:59 -07:00
parent 7d659212b0
commit 2abcd9f2b5
2 changed files with 6 additions and 0 deletions

View File

@ -9,6 +9,7 @@ import useTheme from 'hooks/useTheme';
import { DEFAUL_CHART_HEIGHT, DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants'; import { DEFAUL_CHART_HEIGHT, DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
import styles from './BarChart.module.css'; import styles from './BarChart.module.css';
import ChartTooltip from './ChartTooltip'; import ChartTooltip from './ChartTooltip';
import useForceUpdate from '../../hooks/useForceUpdate';
export default function BarChart({ export default function BarChart({
chartId, chartId,
@ -28,6 +29,8 @@ export default function BarChart({
const [tooltip, setTooltip] = useState(null); const [tooltip, setTooltip] = useState(null);
const [locale] = useLocale(); const [locale] = useLocale();
const [theme] = useTheme(); const [theme] = useTheme();
const forceUpdate = useForceUpdate();
const colors = { const colors = {
text: THEME_COLORS[theme].gray700, text: THEME_COLORS[theme].gray700,
line: THEME_COLORS[theme].gray200, line: THEME_COLORS[theme].gray200,
@ -180,6 +183,8 @@ export default function BarChart({
onUpdate(chart.current); onUpdate(chart.current);
chart.current.update(); chart.current.update();
forceUpdate();
} }
useEffect(() => { useEffect(() => {

View File

@ -79,6 +79,7 @@ export default function EventsChart({ websiteId, className, token }) {
className={className} className={className}
datasets={datasets} datasets={datasets}
unit={unit} unit={unit}
height={300}
records={getDateLength(startDate, endDate, unit)} records={getDateLength(startDate, endDate, unit)}
onUpdate={handleUpdate} onUpdate={handleUpdate}
loading={loading} loading={loading}