\r\n \r\n \r\n
\r\n```\r\n\r\n## CodeSandBox Example\r\n\r\n---\r\n\r\nStatic Data：\r\n\r\n![\"\"](\"exampleImage/README/2024-06-14-09-18-54-image.png\" "\\"\\"")
\r\n\r\n\r\nClick to check on CodeSandBox\r\n
\r\n\r\nDynamic data (dynamically loading historical data, websocket loading real-time prices):\r\n\r\n![\"\"](\"exampleImage/README/2024-06-14-11-00-47-image.png\" "\\"\\"")
\r\n\r\n\r\nClick to check on CodeSandBox\r\n
\r\n\r\nStyle / Language / Display Time Zone Changes:\r\n\r\n![\"\"](\"exampleImage/README/2024-06-14-16-28-11-image.png\" "\\"\\"")
\r\n\r\n\r\nClick to check on CodeSandBox\r\n
\r\n\r\n---\r\n\r\n## Configuration Details\r\n\r\nWhen you use the useCandleView hook, you need to pass in the configuration {....}. The following text will list all configurable items\r\n\r\n```javascript\r\nconst candleViewHook = useCandleView({.....});\r\n```\r\n\r\nTitle configuration:\r\n\r\n![\"\"](\"exampleImage/README/2024-06-14-22-50-58-image.png\" "\\"\\"")
\r\n\r\n```javascript\r\nconst candleViewHook = useCandleView({\r\n //Set the title of the component here, which can accept strings and jsx\r\n title: 'This is title here',\r\n});\r\n```\r\n\r\nDisplay of Candle's information/title:\r\n\r\n![\"\"](\"exampleImage/README/2024-06-14-22-52-20-image.png\" "\\"\\"")
\r\n\r\n```javascript\r\nconst candleViewHook = useCandleView({\r\n //Set whether the title is displayed here\r\n enableTitle: true,\r\n //Set whether the handle information is displayed here\r\n enableinfo: true,\r\n});\r\n```\r\n\r\nStatic data format:\r\n\r\n```javascript\r\nconst candleViewHook = useCandleView({\r\n data: {\r\n staticData: [\r\n ...\r\n {\r\n //Time, only accepts 13 digit timestamp number format, please handle it yourself\r\n time: 1715874300000,\r\n //open price\r\n open: 568.1485329113463,\r\n //Highest price\r\n high: 568.6032108510848,\r\n //Lowest price\r\n low: 567.6374548048495,\r\n //Closing price\r\n close: 568.3758264156954,\r\n //Turnover\r\n volume: 163449516.83591747,\r\n },\r\n ...\r\n ],\r\n },\r\n});\r\n```\r\n\r\nAll configuration items:\r\n\r\n```javascript\r\nconst candleViewHook = useCandleView({\r\n // Title\r\n title: 'Set Your Title',\r\n // Whether to display the title\r\n enableTitle: true,\r\n // Whether to show candle information\r\n enableinfo: true,\r\n // Time unit of input data, supports:\r\n // \"1min\"| \"2min\"| \"3min\"| \"5min\"| \"10min\"| \"15min\"| \"30min\"| \"1h\"| \"1d\"| \"1w\"| \"1m\"| \"1y\"\r\n timeFormat: '1h',\r\n // Width, accepts \"14px\" / \"100%\" / \"14\" / \"auto\"\r\n // When \"auto\" is used, component size adjusts with container changes\r\n width: 'auto',\r\n // Height, accepts \"14px\" / \"100%\" / \"14\" / \"auto\"\r\n // When \"auto\" is used, component size adjusts with container changes\r\n height: '500px',\r\n // Background color\r\n backgroundColor: '#fff',\r\n // Debounce time when component size (width/height) set to \"auto\" changes with container\r\n // Set to 0 for no debounce processing\r\n resizeDebounceTime: 100,\r\n // Component display language\r\n language: 'zh',\r\n // Timezone settings\r\n timeZone: {\r\n // Set the timezone of the input data\r\n // For example, if the current data uses GMT +0000 (Greenwich Mean Time),\r\n // then set this to 0\r\n dataSourceTimeZone: 0,\r\n // When fetching dynamic data passed to config.data.dynamic.dataFetchCallback()'s start-end timestamps,\r\n // which timezone's time should be used; if your data interface only accepts timezone 0, then set this to 0\r\n fetchConditionTimeZone: 0,\r\n // Which timezone x-axis and tooltips should display in; for instance, I want to display as Beijing time regardless of the source timezone,\r\n // then set this to 8\r\n displayTimeZone: 0,\r\n },\r\n // Y-axis configuration\r\n yAxis: {\r\n // Space left for y-axis labels, accepts \"14px\" / \"20%\" / \"14\"\r\n labelSpace: '90px',\r\n // Formatter for the y-axis\r\n formatter: function(axisItem) {\r\n return axisItem.displayValue.toString();\r\n },\r\n // Font size\r\n fontSize: '12px',\r\n // Grid line color\r\n netLineColor: '#dedede',\r\n // Y-axis line color\r\n lineColor: '#454545',\r\n // Color for y-axis pointers and text\r\n tickColor: '#454545',\r\n // Pointer length\r\n tickLength: '3px',\r\n // Thickness of grid lines\r\n netLineSize: 0.5,\r\n // Maximum number of y-axis pointers to appear\r\n netLineMaxCount: 14,\r\n // Minimum number of y-axis pointers to appear\r\n netLineMinCount: 3,\r\n // Percentage of total height above and below the y-axis to leave empty, 1 is 100%\r\n displayPadding: 0.3,\r\n // Tooltip settings for the y-axis\r\n tooltip: {\r\n // Whether to enable y-axis tooltip\r\n enabled: true,\r\n // Tooltip line color\r\n color: '#02121c',\r\n // Tooltip line thickness\r\n lineSize: 0.5,\r\n // Length of the solid part of the line\r\n dashLength: 4,\r\n // Length of the gap part of the line\r\n spaceLength: 3,\r\n // Label display settings for tooltip\r\n label: {\r\n // Font size, accepts numbers only, unit px\r\n fontsize: 12,\r\n // Font and tick color\r\n color: '#ffffff',\r\n // Background color\r\n backGroundColor: '#454545',\r\n // Background transparency\r\n backGroundAlpha: 1,\r\n // Formatter for tooltip text\r\n formatter: function(axisItem) {\r\n axisItem = axisItem;\r\n // yyyy-MM-dd HH:mm:ss\r\n return axisItem.displayValue;\r\n },\r\n },\r\n },\r\n },\r\n // X-axis configuration\r\n xAxis: {\r\n // Space left for x-axis labels, accepts \"14px\" / \"20%\" / \"14\"\r\n labelSpace: '30px',\r\n // Formatter for the x-axis\r\n formatter: function(axisItem) {\r\n return axisItem.displayValue.toString();\r\n },\r\n // Font size\r\n fontSize: '12px',\r\n // Grid line color\r\n netLineColor: '#dedede',\r\n // Y-axis line color (This seems incorrectly placed, likely meant for x-axis line color)\r\n lineColor: '#454545',\r\n // Color for x-axis pointers and text\r\n tickColor: '#454545',\r\n // Pointer length\r\n tickLength: '4px',\r\n // Thickness of grid lines\r\n netLineSize: 0.5,\r\n // Initial time point to position at, default \"now\"\r\n initTimePoint: 'now',\r\n // Ratio by which the x-axis extends beyond its width, default 0\r\n displayPadding: 0,\r\n // Tooltip settings for the x-axis\r\n tooltip: {\r\n // Whether to enable x-axis tooltip\r\n enabled: true,\r\n // Tooltip line color\r\n color: '#02121c',\r\n // Tooltip line thickness\r\n lineSize: 0.5,\r\n // Length of the solid part of the line\r\n dashLength: 4,\r\n // Length of the gap part of the line\r\n spaceLength: 3,\r\n // Label display settings for tooltip\r\n label: {\r\n // Font size, accepts numbers only, unit px\r\n fontsize: 12,\r\n // Font and tick color\r\n color: '#ffffff',\r\n // Background color\r\n backGroundColor: '#454545',\r\n // Background transparency\r\n backGroundAlpha: 1,\r\n // Formatter for tooltip text\r\n formatter: function(axisItem) {\r\n // yyyy-MM-dd HH:mm:ss\r\n },\r\n },\r\n },\r\n },\r\n});\r\n```\r\n\r\n---\r\n\r\n## Methods of exposure:\r\n\r\n```javascript\r\n // Using the hook provided by the component\r\n const candleViewHook = useCandleView({...});\r\n\r\n // Set canvas width\r\n candleViewHook.setCanvasWidth(\"100%\" | \"auto\" | \"200px\" | 200);\r\n // Set canvas height\r\n candleViewHook.setCanvasHeight(\"100%\" | \"auto\" | \"200px\" | 200);\r\n\r\n /**\r\n * Reset configuration properties\r\n * The format should match the configuration of useCandleView()\r\n * Primarily used for changing styles\r\n */\r\n candleViewHook.setInitArgs({...});\r\n\r\n /**\r\n * Updates the chart with the current real-time price, which will reflect on the first candle\r\n * @param candleItem {open: opening price, close: closing price, high: highest price, low: lowest price, volume: trading volume, time: timestamp} \r\n * Only accepts 13-digit timestamps here; handle timezone conversions separately and avoid calculations.\r\n * Component settings can be used for configurations.\r\n * @returns void\r\n */\r\n candleViewHook.appendData({...});\r\n\r\n /**\r\n * Switch time unit\r\n * 1. After switching time units, immediately stop websocket updates.\r\n * 2. Upon switching, config.data.dynamic.dataFetchCallback() will be called immediately, passing in new time range parameters for data retrieval.\r\n * 3. You may set \"1h\" and feed it with \"15min\" data; the component will automatically merge into hourly data display.\r\n */\r\n candleViewHook.setTimeFormat(\"1min\" | \"2min\" | \"3min\" | \"5min\" | \"10min\" | \"15min\" | \"30min\" | \"1h\" | \"1d\" | \"1w\" | \"1m\" | \"1y\");\r\n\r\n /**\r\n * Set component interface language\r\n */\r\n candleViewHook.setLanguage(\"zh\" | \"en\");\r\n\r\n /**\r\n * Set timezone configuration\r\n * 1. Triggering this configuration will cause the component to reinitialize.\r\n * 2. If dynamic data is enabled, triggering this will lead to the component refetching data.\r\n */\r\n candleViewHook.setTimeZone({\r\n // Set the timezone of the input data\r\n // For instance, if the current data uses GMT +0000 (Greenwich Mean Time),\r\n // then set this to 0.\r\n dataSourceTimeZone: 0,\r\n // When fetching dynamic data via config.data.dynamic.dataFetchCallback(),\r\n // specify which timezone the start and end timestamps should adhere to.\r\n // If your data API only accepts timezone 0, then enter 0 here.\r\n fetchConditionTimeZone: 0,\r\n // Set the timezone for x-axis and tooltips display.\r\n // Regardless of the timezone of the data source, if you prefer to show Beijing time,\r\n // then enter 8 here.\r\n displayTimeZone: 0,\r\n });\r\n```\r\n\r\n---\r\n\r\n## Data provided:\r\n\r\n```javascript\r\n const candleViewHook = useCandleView({...});\r\n\r\n /**\r\n * Monitor current component size changes\r\n */\r\n useEffect(\r\n function(): ReturnType