99defaults ,
1010Legend ,
1111LinearScale ,
12- LineElement ,
13- PointElement ,
12+ BarElement ,
1413TimeScale ,
1514Title ,
1615Tooltip ,
@@ -23,14 +22,13 @@ import {
2322} from "components/Tooltips/HelpTooltip"
2423import dayjs from "dayjs"
2524import { FC } from "react"
26- import { Line } from "react-chartjs-2"
25+ import { Bar } from "react-chartjs-2"
2726
2827ChartJS . register (
2928CategoryScale ,
3029LinearScale ,
3130TimeScale ,
32- PointElement ,
33- LineElement ,
31+ BarElement ,
3432Title ,
3533Tooltip ,
3634Legend ,
@@ -54,12 +52,21 @@ export const DAUChart: FC<DAUChartProps> = ({ daus }) => {
5452defaults . font . family = theme . typography . fontFamily as string
5553defaults . color = theme . palette . text . secondary
5654
57- const options :ChartOptions < "line " > = {
55+ const options :ChartOptions < "bar " > = {
5856responsive :true ,
5957plugins :{
6058legend :{
6159display :false ,
6260} ,
61+ tooltip :{
62+ displayColors :false ,
63+ callbacks :{
64+ title :( context ) => {
65+ const date = new Date ( context [ 0 ] . parsed . x )
66+ return date . toLocaleDateString ( )
67+ } ,
68+ } ,
69+ } ,
6370} ,
6471scales :{
6572y :{
@@ -70,7 +77,7 @@ export const DAUChart: FC<DAUChartProps> = ({ daus }) => {
7077} ,
7178x :{
7279ticks :{
73- stepSize :2 ,
80+ stepSize :daus . entries . length > 10 ? 2 : undefined ,
7481} ,
7582type :"time" ,
7683time :{
@@ -82,17 +89,20 @@ export const DAUChart: FC<DAUChartProps> = ({ daus }) => {
8289}
8390
8491return (
85- < Line
92+ < Bar
8693data-chromatic = "ignore"
8794data = { {
8895labels :labels ,
8996datasets :[
9097{
9198label :"Daily Active Users" ,
9299data :data ,
93- tension :1 / 4 ,
94100backgroundColor :theme . palette . secondary . dark ,
95101borderColor :theme . palette . secondary . dark ,
102+ barThickness :8 ,
103+ borderWidth :2 ,
104+ borderRadius :Number . MAX_VALUE ,
105+ borderSkipped :false ,
96106} ,
97107] ,
98108} }