diff --git a/README.md b/README.md
index 0d02263..03f12c6 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,11 @@ Tarka Chat UI is a plug and play javascript library to integrate a chat assistan
```
```
+ Include highcharts library to generate charts by highcharts
+ ```
+
+
+ ```
2. Initialise the global `TarkaChat` component with options in any script tag
@@ -80,7 +85,13 @@ where,
"name": "IMAGE_NAME",
}
```
-
+ - _HighCharts config type:_
+ ```
+ {
+ "type": "highchart-config",
+ "high_chart_config": { highcharts_config_obj }
+ }
+ ```
3. _Array containing one/multiple of above mentioned types:_
E.g.
@@ -98,7 +109,6 @@ where,
]
```
-
## Demo
Demo is deployed from the application code in `demo/` folder.
diff --git a/demo/index.html b/demo/index.html
index 96f126c..fa2b494 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -12,6 +12,8 @@
}
+
+
diff --git a/dev/index.html b/dev/index.html
index 929500a..5bbdade 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -3,6 +3,8 @@
+
+
TarkaChat DevMode
diff --git a/src/main.js b/src/main.js
index c5013df..6a43032 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,6 +8,29 @@ import downloadImg from "./images/download.png";
const INITIAL_STATE = false;
+
+Highcharts.setOptions({
+ credits: {
+ enabled: false
+ },
+ title:{
+ style: {
+ fontSize: '12px',
+ fontWeight: 'normal',
+ }
+ },
+ plotOptions: {
+ series: {
+ dataLabels: {
+ style: {
+ fontSize: '10px',
+ fontWeight: 'normal'
+ }
+ }
+ }
+ },
+});
+
function loadLottie(element) {
const animation = lottie.loadAnimation({
container: element,
@@ -155,7 +178,6 @@ export default {
`;
return this.createNode("attachment", nodeContent);
-
case "image":
this.validateFieldPresent('link', data);
const imageContent = `
@@ -164,8 +186,12 @@ export default {
`;
- return this.createNode("image-container", imageContent);
-
+ return this.createNode("image-container", imageContent);
+ case "highchart-config":
+ this.validateFieldPresent('high_chart_config', data);
+ let ele = this.createNode("high-chart-container");
+ Highcharts.chart(ele,data.high_chart_config);
+ return ele;
default:
throw new Error(`Invalid type: ${type}`);
}
diff --git a/src/style.scss b/src/style.scss
index 882ff6f..ec57872 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -123,6 +123,19 @@
}
}
+ .high-chart-container {
+ width: 110%;
+ height: 300px;
+ position: relative;
+ border: 1px solid var(--primary-primary-subtle, #f0dafb); /* Set border color as needed */
+ border-radius: 15px;
+ margin: 4px 0;
+
+ .highcharts-button-box {
+ fill: var(--primary-primary-subtle, #f0dafb) !important;
+ }
+ }
+
.image-container {
position: relative;
border: 1px solid var(--primary-primary-subtle, #f0dafb); /* Set border color as needed */