LineChart
LineChart
は、複数のデータを比較するためのラインチャートを描画するコンポーネントです。
テーマ
LineChart
は、複数パーツのコンポーネントです。
コンポーネントのスタイルを変更したい場合は、こちらをご覧ください。
export const LineChart: ComponentMultiStyle<"LineChart"> = {baseStyle: {container: {},chart: {},referenceLine: {fillOpacity: 1,fontSize: "xs",},grid: {stroke: ["blackAlpha.400", "whiteAlpha.400"],strokeWidth: 1,},cursor: {fill: ["blackAlpha.50", "whiteAlpha.50"],stroke: ["blackAlpha.400", "whiteAlpha.400"],strokeWidth: 1,},xAxis: {color: ["blackAlpha.700", "whiteAlpha.600"],fontSize: "xs",},yAxis: {color: ["blackAlpha.700", "whiteAlpha.600"],fontSize: "xs",},xAxisLabel: {fontSize: 12,},yAxisLabel: {fontSize: 12,},line: {},dot: {strokeWidth: 2,},activeDot: {strokeWidth: 2,fill: ["white", "black"],},legend: {display: "flex",flexWrap: "wrap",justifyContent: "flex-end",},legendItem: {display: "flex",alignItems: "center",rounded: "md",gap: "sm",transitionProperty: "common",transitionDuration: "slower",color: ["blackAlpha.800", "whiteAlpha.700"],_hover: {bg: ["blackAlpha.50", "whiteAlpha.100"],},},legendSwatch: {boxSize: "3",rounded: "full",},tooltip: {display: "flex",flexDirection: "column",minW: "48",gap: "sm",rounded: "md",bg: ["white", "black"],border: "1px solid",borderColor: ["blackAlpha.200", "whiteAlpha.100"],p: "3",fontWeight: "medium",fontSize: "sm",color: "inherit",boxShadow: ["md", "dark-md"],maxW: "xs",zIndex: "dodoria",},tooltipTitle: {fontSize: "md",},tooltipList: {display: "flex",flexDirection: "column",gap: "xs",},tooltipItem: {display: "flex",alignItems: "center",gap: "sm",fontSize: "sm",},tooltipSwatch: {boxSize: "3",rounded: "full",},tooltipLabel: {color: ["blackAlpha.800", "whiteAlpha.700"],},tooltipValue: {flex: 1,textAlign: "end",},},variants: {},sizes: {sm: ({ theme: t }) => ({container: {w: "xl",h: "xs",},legend: {gap: "xs",mb: "md",},legendItem: {minH: "6",minW: "6",fontSize: "xs",px: "2",lineHeight: get(t, "sizes.6"),},}),md: ({ theme: t }) => ({container: {w: "3xl",h: "sm",},legend: {gap: "xs",mb: "md",},legendItem: {minH: "7",minW: "7",fontSize: "sm",px: "3",lineHeight: get(t, "sizes.7"),},}),lg: ({ theme: t }) => ({container: {w: "5xl",h: "md",},legend: {gap: "sm",mb: "md",},legendItem: {minH: "8",minW: "8",fontSize: "md",px: "3",lineHeight: get(t, "sizes.8"),},}),full: ({ theme: t }) => ({container: {w: "full",h: "md",},legend: {gap: "sm",mb: "md",},legendItem: {minH: "8",minW: "8",fontSize: "md",px: "3",lineHeight: get(t, "sizes.8"),},}),},defaultProps: {size: "full",},}
GitHubでこのページを編集する