Color options for each data point

Project.toml

@@ -1,6 +1,6 @@
 name = "LightweightCharts"
 uuid = "d6998af1-87ca-4e7f-83d4-864c79a249fa"
-version = "1.0.1"
+version = "1.1.0"
 
 [deps]
 Serde = "db9b398d-9517-45f8-9a95-92af99003e0e"

README.md

@@ -73,21 +73,26 @@ panel = lwc_panel(
         map(
             x -> LWCCandle(x.openTime, x.openPrice, x.highPrice, x.lowPrice, x.closePrice),
             ohlc.result,
-        ),
+        );
         label_name = "lwc_candlestick",
         up_color = "#52a49a",
         down_color = "#de5e57",
         border_visible = false,
         price_scale_id = LWC_LEFT,
     ),
     lwc_histogram(
-        map(x -> x.openTime, ohlc.result),
-        map(x -> x.volume, ohlc.result);
+        map(
+            x -> LWCSimpleChartData(
+                x.openTime,
+                x.volume,
+                color = x.openPrice > x.closePrice ? "#de5e5780" : "#52a49a80",
+            ),
+            ohlc.result,
+        );
         label_name = "lwc_histogram",
-        base = -100.0,
-        color = "rgba(47, 112, 181, 0.5)",
+        base = 0.0,
         price_scale_id = LWC_RIGHT,
-    ),
+    );
     name = "ETHUSDT | Binance Spot",
 )
 
@@ -106,11 +111,11 @@ layout = lwc_layout(
     lwc_panel(
         lwc_area(
             NanoDate("2024-01-01") .+ Second.(1:500),
-            map(x -> rand(1:500), collect(1:500)),
+            map(x -> rand(1:500), collect(1:500));
             label_name = "lwc_area",
             line_color = "#49c7e3",
             top_color = "#74d7ed",
-            bottom_color = "rgba(133, 242, 240, 0)",
+            bottom_color = "#85f2f000",
             line_style = LWC_SOLID,
             line_type = LWC_STEP,
             line_width = 2,
@@ -126,7 +131,7 @@ layout = lwc_layout(
             line_type = LWC_SIMPLE,
             line_width = 3,
             price_scale_id = LWC_RIGHT,
-        ),
+        );
         x = 1,
         y = 1,
     ),
@@ -141,10 +146,10 @@ layout = lwc_layout(
             line_width = 3,
             precision = 4,
             price_scale_id = LWC_RIGHT,
-        ),
+        );
         x = 2,
         y = 1,
-    ),
+    );
     name = "LightweightCharts ❤️ Julia"
 )
 
@@ -182,7 +187,7 @@ chart = lwc_panel(
         line_color = "#cb3c33",
         point_markers_visible = true,
         line_visible = false,
-    ),
+    );
     max_y = 1.6
 )
 

docs/src/index.md

@@ -63,21 +63,26 @@ panel = lwc_panel(
         map(
             x -> LWCCandle(x.openTime, x.openPrice, x.highPrice, x.lowPrice, x.closePrice),
             ohlc.result,
-        ),
+        );
         label_name = "lwc_candlestick",
         up_color = "#52a49a",
         down_color = "#de5e57",
         border_visible = false,
         price_scale_id = LWC_LEFT,
     ),
     lwc_histogram(
-        map(x -> x.openTime, ohlc.result),
-        map(x -> x.volume, ohlc.result);
+        map(
+            x -> LWCSimpleChartData(
+                x.openTime,
+                x.volume,
+                color = x.openPrice > x.closePrice ? "#de5e5780" : "#52a49a80",
+            ),
+            ohlc.result,
+        );
         label_name = "lwc_histogram",
-        base = -100.0,
-        color = "rgba(47, 112, 181, 0.5)",
+        base = 0.0,
         price_scale_id = LWC_RIGHT,
-    ),
+    );
     name = "ETHUSDT | Binance Spot",
 )
 
@@ -96,11 +101,11 @@ layout = lwc_layout(
     lwc_panel(
         lwc_area(
             NanoDate("2024-01-01") .+ Second.(1:500),
-            map(x -> rand(1:500), collect(1:500)),
+            map(x -> rand(1:500), collect(1:500));
             label_name = "lwc_area",
             line_color = "#49c7e3",
             top_color = "#74d7ed",
-            bottom_color = "rgba(133, 242, 240, 0)",
+            bottom_color = "#85f2f000",
             line_style = LWC_SOLID,
             line_type = LWC_STEP,
             line_width = 2,
@@ -116,7 +121,7 @@ layout = lwc_layout(
             line_type = LWC_SIMPLE,
             line_width = 3,
             price_scale_id = LWC_RIGHT,
-        ),
+        );
         x = 1,
         y = 1,
     ),
@@ -131,10 +136,10 @@ layout = lwc_layout(
             line_width = 3,
             precision = 4,
             price_scale_id = LWC_RIGHT,
-        ),
+        );
         x = 2,
         y = 1,
-    ),
+    );
     name = "LightweightCharts ❤️ Julia"
 )
 
@@ -172,7 +177,7 @@ chart = lwc_panel(
         line_color = "#cb3c33",
         point_markers_visible = true,
         line_visible = false,
-    ),
+    );
     max_y = 1.6
 )
 

docs/src/pages/charts.md

@@ -219,3 +219,46 @@ nothing # hide
 ```@raw html
     <iframe src="../bar_example.html" style="height:500px;width:100%;"></iframe>
 ```
+
+## Multi-colors
+
+```@docs
+LWCSimpleChartData
+```
+
+### Example
+
+```@example
+using Dates
+using LightweightCharts
+import LightweightCharts: randcolor
+
+t_range = 1:500
+
+chart = lwc_baseline(
+    map(
+        x -> LWCSimpleChartData(
+            now() + Second(x),
+            cos.(x / 10);
+            color = randcolor(),
+            top_line_color = randcolor(),
+            top_fill_color_1 = randcolor(),
+            bottom_line_color = randcolor(),
+            bottom_fill_color_2 = randcolor(),
+        ),
+        t_range,
+    );
+    label_name = "lwc_baseline",
+    line_type = LWC_STEP,
+    price_scale_id = LWC_RIGHT,
+    line_width = 4,
+)
+
+lwc_save("colors_example.html", chart)
+nothing # hide
+```
+
+```@raw html
+    <iframe src="../colors_example.html" style="height:500px;width:100%;"></iframe>
+```
+

docs/src/pages/layout.md

@@ -75,7 +75,7 @@ layout = lwc_layout(
             line_width = 3,
             precision = 4,
             price_scale_id = LWC_RIGHT,
-        ),
+        );
         x = 1,
         y = 1,
     ),
@@ -102,7 +102,7 @@ layout = lwc_layout(
             line_type = LWC_SIMPLE,
             line_width = 3,
             price_scale_id = LWC_RIGHT,
-        ),
+        );
         x = 1,
         y = 2,
     );

src/LightweightCharts.jl

@@ -307,9 +307,14 @@ function Base.propertynames(h::AbstractChartSettings)
     return to_camelcase.(n)
 end
 
+function Serde.SerJson.ser_name(::Type{A}, ::Val{T}) where {A<:AbstractChartData,T}
+    return to_camelcase(T)
+end
+
 function Serde.SerJson.ser_name(::Type{A}, ::Val{T}) where {A<:AbstractChartSettings,T}
     return to_camelcase(T)
 end
+
 function Serde.SerJson.ser_name(::Type{A}, ::Val{T}) where {A<:AbstractPluginSettings,T}
     return to_camelcase(T)
 end