From d7a84d71f9fa4b9a4ea43a33bb9a5190201f39d9 Mon Sep 17 00:00:00 2001
From: liihuu <hu_li888@foxmail.com>
Date: Tue, 26 Mar 2024 01:17:46 +0800
Subject: [PATCH] docs: v9.8.2 docs.

---
 docs/en-US/guide/changelog.md |  6 ++++++
 docs/en-US/guide/styles.md    | 21 +++++++++++++++++++--
 docs/guide/changelog.md       |  6 ++++++
 docs/guide/styles.md          | 21 +++++++++++++++++++--
 package.json                  |  2 +-
 5 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/docs/en-US/guide/changelog.md b/docs/en-US/guide/changelog.md
index 7b4eb621a..76a9c71b4 100644
--- a/docs/en-US/guide/changelog.md
+++ b/docs/en-US/guide/changelog.md
@@ -1,5 +1,11 @@
 # 📠 Change Log
 
+## 9.8.2
+`2024-03-26`
++ 💄 Optimize the display of the area chart.
++ 💄 Optimize smooth line drawing.
++ 🐞 Fix the overlay and drawing it to future time may not be an issue.
+
 ## 9.8.1
 `2024-03-13`
 + 🐞 Fix an issue where initialize only `xAxis` in `layout` caused the chart to fail to initialize.
diff --git a/docs/en-US/guide/styles.md b/docs/en-US/guide/styles.md
index 3a986ba5f..48c98f21a 100644
--- a/docs/en-US/guide/styles.md
+++ b/docs/en-US/guide/styles.md
@@ -44,6 +44,7 @@ import StyleExplain from '../../components/StyleExplain.vue'
     area: {
       lineSize: 2,
       lineColor: '#2196F3',
+      smooth: false,
       value: 'close',
       backgroundColor: [{
         offset: 0,
@@ -51,7 +52,16 @@ import StyleExplain from '../../components/StyleExplain.vue'
       }, {
         offset: 1,
         color: 'rgba(33, 150, 243, 0.2)'
-      }]
+      }],
+      point: {
+        show: true,
+        color: blue,
+        radius: 4,
+        rippleColor: getAlphaBlue(0.3),
+        rippleRadius: 8,
+        animation: true,
+        animationDuration: 1000
+      }
     },
     priceMark: {
       show: true,
@@ -115,7 +125,14 @@ import StyleExplain from '../../components/StyleExplain.vue'
       // title or title.text can be an internationalized key,
       // value or value.text supports string templates
       // For example: want to display time, opening and closing, configure [{ title: 'time', value: '{time}' }, { title: 'open', value: '{open}' }, { title: ' close', value: '{close}' }]
-      custom: null,
+      custom: [
+        { title: 'time', value: '{time}' },
+        { title: 'open', value: '{open}' },
+        { title: 'high', value: '{high}' },
+        { title: 'low', value: '{low}' },
+        { title: 'close', value: '{close}' },
+        { title: 'volume', value: '{volume}' }
+      ],
       defaultValue: 'n/a',
       rect: {
        // 'fixed' | 'pointer'
diff --git a/docs/guide/changelog.md b/docs/guide/changelog.md
index bf519ef1c..9720c910e 100644
--- a/docs/guide/changelog.md
+++ b/docs/guide/changelog.md
@@ -1,4 +1,10 @@
 # 📠 更新日志
+## 9.8.2
+`2024-03-26`
++ 💄 优化面积图显示。
++ 💄 优化平滑曲线绘制。
++ 🐞 修复覆盖物绘制到未来时间，可能不对问题。
+
 
 ## 9.8.1
 `2024-03-13`
diff --git a/docs/guide/styles.md b/docs/guide/styles.md
index acf7702cc..e9c9dddee 100644
--- a/docs/guide/styles.md
+++ b/docs/guide/styles.md
@@ -51,13 +51,23 @@ import StyleExplain from '../components/StyleExplain.vue'
       lineSize: 2,
       lineColor: '#2196F3',
       value: 'close',
+      smooth: false,
       backgroundColor: [{
         offset: 0,
         color: 'rgba(33, 150, 243, 0.01)'
       }, {
         offset: 1,
         color: 'rgba(33, 150, 243, 0.2)'
-      }]
+      }],
+      point: {
+        show: true,
+        color: blue,
+        radius: 4,
+        rippleColor: getAlphaBlue(0.3),
+        rippleRadius: 8,
+        animation: true,
+        animationDuration: 1000
+      }
     },
     priceMark: {
       show: true,
@@ -125,7 +135,14 @@ import StyleExplain from '../components/StyleExplain.vue'
       // title 或者 title.text 可以是国际化的 key，
       // value 或者 value.text 支持字符串模版
       // 例如：想显示时间，开盘和收盘，配置[{ title: 'time', value: '{time}' }, { title: 'open', value: '{open}' }, { title: 'close', value: '{close}' }]
-      custom: null,
+      custom: [
+        { title: 'time', value: '{time}' },
+        { title: 'open', value: '{open}' },
+        { title: 'high', value: '{high}' },
+        { title: 'low', value: '{low}' },
+        { title: 'close', value: '{close}' },
+        { title: 'volume', value: '{volume}' }
+      ],
       defaultValue: 'n/a',
       rect: {
         // 'fixed' | 'pointer'
diff --git a/package.json b/package.json
index fb530f62d..4f2df3988 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "klinecharts",
-  "version": "9.8.1",
+  "version": "9.8.2",
   "description": "Lightweight k-line chart built with html5 canvas",
   "main": "./dist/index.cjs",
   "module": "./dist/index.esm.js",