Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | import { palette } from "@palette";
import { FONT_PRIMARY } from "@theme/v2/const";
import { TooltipLabelStyle } from "chart.js";
import moment from "moment";
const generalFont = {
size: 12,
weight: "normal",
family: FONT_PRIMARY,
lineHeight: "14.4px",
};
export const lineChartOptions = {
responsive: true,
maintainAspectRatio: false,
interaction: {
mode: "index" as const,
intersect: false,
},
stacked: false,
plugins: {
title: {
display: false,
},
legend: {
display: false,
},
tooltip: {
usePointStyle: true,
boxWidth: 7,
boxHeight: 7,
boxPadding: 0,
borderWidth: 0,
position: "nearest" as const,
xAlign: "left" as const,
yAlign: "center" as const,
padding: {
left: 12,
right: 12,
top: 9,
bottom: 9,
},
titleColor(ctx: any, options: any) {
return palette.gray[300];
},
backgroundColor: palette.black[300],
titleFont: generalFont,
bodyFont: generalFont,
cornerRadius: 6,
caretSize: 0,
callbacks: {
title(tooltipItem: any) {
const label = tooltipItem[0]?.label;
const title = moment.utc(new Date(label)).format("MMM DD");
return title;
},
labelPointStyle(context: any) {
return { pointStyle: "circle" as const, rotation: 0 };
},
labelTextColor(tooltipItem: any) {
return palette.liftedWhite[300];
},
label(tooltipItem: any) {
const label = tooltipItem?.dataset?.label;
const value = tooltipItem?.parsed?.y || 0;
return ` ${label}: ${value}`;
},
labelColor: function (context: any): TooltipLabelStyle {
return {
borderColor:
context.dataset.borderColor ?? context.dataset.backgroundColor,
backgroundColor:
context.dataset.borderColor ?? context.dataset.backgroundColor,
borderWidth: 1,
};
},
},
},
},
scales: {
y: {
type: "linear" as const,
display: true,
position: "right" as const,
ticks: {
crossAlign: "far" as const,
color: "#8F8F8F" as const,
font: generalFont,
},
grid: {
drawTicks: false,
},
},
x: {
beginAtZero: true,
type: "time" as const,
position: "bottom" as const,
ticks: {
color: "#8F8F8F" as const,
font: generalFont,
maxTicksLimit: 12,
beginAtZero: true,
},
grid: {
drawOnChartArea: false,
drawTicks: false,
},
},
},
};
|