diff --git a/src/graph-gallery/axis/fsharp.ipynb b/src/graph-gallery/axis/fsharp.ipynb new file mode 100644 index 0000000..b920025 --- /dev/null +++ b/src/graph-gallery/axis/fsharp.ipynb @@ -0,0 +1,396 @@ +{ + "cells": [ + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "# Advanced axis styling using Plotly.NET\n", + "\n", + "This post assumes you are already familiar using Plotly.NET. If you want to manually define the position of individual plots and have special needs for axis stylings, keep on reading. \n", + "\n", + "Note: There may be other ways to obtain the result seen below\n", + "\n", + "First let us define three simple charts and combine them to a chart grid" + ] + }, + { + "cell_type": "code", + "execution_count": 1, + "metadata": { + "dotnet_interactive": { + "language": "fsharp" + }, + "polyglot_notebook": { + "kernelName": "fsharp" + } + }, + "outputs": [ + { + "data": { + "text/html": [ + "
Installed Packages
" + ] + }, + "metadata": {}, + "output_type": "display_data" + }, + { + "data": { + "text/plain": [ + "Loading extensions from `C:\\Users\\bvenn\\.nuget\\packages\\plotly.net.interactive\\4.2.1\\interactive-extensions\\dotnet\\Plotly.NET.Interactive.dll`" + ] + }, + "metadata": {}, + "output_type": "display_data" + }, + { + "data": { + "text/html": [ + "
" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "#r \"nuget: Plotly.NET.Interactive, 4.2.1\"\n", + "\n", + "open Plotly.NET\n", + "open Plotly.NET.StyleParam\n", + "open Plotly.NET.LayoutObjects\n", + "\n", + "let chartA = Chart.Point(xy=[1,2])\n", + "let chartB = Chart.Point(xy=[1,2])\n", + "let chartC = Chart.Line(xy=[1,2;2,3])\n", + "\n", + "[\n", + " chartA\n", + " chartB\n", + " chartC\n", + "]\n", + "|> Chart.Grid(2,2)" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "Now lets define the regions the plots should be drawn in. Therefore it is required to assign unique axis ids to each chart. The resulting chart does not change by simply defining these ids:" + ] + }, + { + "cell_type": "code", + "execution_count": 2, + "metadata": { + "dotnet_interactive": { + "language": "fsharp" + }, + "polyglot_notebook": { + "kernelName": "fsharp" + } + }, + "outputs": [ + { + "data": { + "text/html": [ + "
" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "let chartWithAxisIds =\n", + " [\n", + " chartA |> Chart.withAxisAnchor(X=1,Y=1)\n", + " chartB |> Chart.withAxisAnchor(X=2,Y=2)\n", + " chartC |> Chart.withAxisAnchor(X=3,Y=3)\n", + " ]\n", + " |> Chart.Grid(2,2)\n", + "\n", + "chartWithAxisIds" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "The defined axis identifiers can be used to set regions the charts are drawn in. Therefore, the ids are used to define the domain region of each axis. \n", + "\n", + "```fsharp\n", + "chartWithAxisIds\n", + "|> Chart.withXAxis(\n", + " // define the axis you want to style\n", + " Id = SubPlotId.XAxis 1, \n", + " // initialize a LinearAxis\n", + " xAxis = \n", + " LinearAxis.init(\n", + " // define the range the chart should be drawn in (percentage)\n", + " // plot 1 x axis ranges from 0% to 33% of the canvas \n", + " Domain = Range.MinMax (0.00, 0.33) \n", + " )\n", + " )\n", + "```\n", + "\n", + "The same procedure is performed for all x and y axis: " + ] + }, + { + "cell_type": "code", + "execution_count": 3, + "metadata": { + "dotnet_interactive": { + "language": "fsharp" + }, + "polyglot_notebook": { + "kernelName": "fsharp" + } + }, + "outputs": [ + { + "data": { + "text/html": [ + "
" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "let chartsWithDefinedRegions = \n", + " chartWithAxisIds\n", + " |> Chart.withXAxis(Id = SubPlotId.XAxis 1, xAxis = LinearAxis.init(Domain = Range.MinMax (0.00, 0.33))) \n", + " |> Chart.withYAxis(Id = SubPlotId.YAxis 1, yAxis = LinearAxis.init(Domain = Range.MinMax (0.00, 0.45)))\n", + " |> Chart.withXAxis(Id = SubPlotId.XAxis 2, xAxis = LinearAxis.init(Domain = Range.MinMax (0.00, 0.33)))\n", + " |> Chart.withYAxis(Id = SubPlotId.YAxis 2, yAxis = LinearAxis.init(Domain = Range.MinMax (0.55, 1.00)))\n", + " |> Chart.withXAxis(Id = SubPlotId.XAxis 3, xAxis = LinearAxis.init(Domain = Range.MinMax (0.40, 1.00)))\n", + " |> Chart.withYAxis(Id = SubPlotId.YAxis 3, yAxis = LinearAxis.init(Domain = Range.MinMax (0.10, 0.90)))\n", + "\n", + "chartsWithDefinedRegions" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "Much more styling can be applied to the axis.\n", + "\n", + "- `TickVals = [1.; 1.29; 1.5; 2.; 3.]` defines the exact tick values (blue chart y axis)\n", + "- `TickVals = []` no tick marks are visible (red chart x axis)\n", + "- `TickFont = Font.init(Size=20,Family=FontFamily.Consolas)` sets the tick font to the specied style\n", + "- `NTicks = 13` sets how many tick marks are visible (green chart x axis)\n", + "- `RangeMode = RangeMode.ToZero` the axis should span the zero value (green chart y axis)\n", + "\n", + "Further style options can be seen at [plotly.net](plotly.net). The final chart generation looks like this:" + ] + }, + { + "cell_type": "code", + "execution_count": 4, + "metadata": { + "dotnet_interactive": { + "language": "fsharp" + }, + "polyglot_notebook": { + "kernelName": "fsharp" + } + }, + "outputs": [ + { + "data": { + "text/html": [ + "
" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "\n", + "[\n", + " Chart.Point(xy=[1,2]) |> Chart.withAxisAnchor(X=1,Y=1)\n", + " Chart.Point(xy=[1,2]) |> Chart.withAxisAnchor(X=2,Y=2)\n", + " Chart.Line(xy=[1,2;2,3]) |> Chart.withAxisAnchor(X=3,Y=3)\n", + "]\n", + "|> Chart.Grid(2,2)\n", + "|> Chart.withXAxis(Id = SubPlotId.XAxis 1, xAxis = LinearAxis.init(Domain = Range.MinMax (0.00, 0.33),Title=Title.init \"blue x axis\"))\n", + "|> Chart.withYAxis(Id = SubPlotId.YAxis 1, yAxis = LinearAxis.init(Domain = Range.MinMax (0.00, 0.45),TickVals = [1.;1.29;1.5;2.;3.]))\n", + "|> Chart.withXAxis(Id = SubPlotId.XAxis 2, xAxis = LinearAxis.init(Domain = Range.MinMax (0.00, 0.33),TickVals = []))\n", + "|> Chart.withYAxis(Id = SubPlotId.YAxis 2, yAxis = LinearAxis.init(Domain = Range.MinMax (0.55, 1.00),TickFont=Font.init(Size=20,Family=FontFamily.Consolas)))\n", + "|> Chart.withXAxis(Id = SubPlotId.XAxis 3, xAxis = LinearAxis.init(Domain = Range.MinMax (0.40, 1.00),NTicks=13))\n", + "|> Chart.withYAxis(Id = SubPlotId.YAxis 3, yAxis = LinearAxis.init(Domain = Range.MinMax (0.10, 0.90),RangeMode=RangeMode.ToZero))\n", + "|> Chart.withLegendStyle(Orientation=Orientation.Horizontal)\n", + "|> Chart.withLayoutStyle(Font=(Font.init(Family=FontFamily.Arial,Size=14)))\n" + ] + } + ], + "metadata": { + "kernelspec": { + "display_name": ".NET (C#)", + "language": "C#", + "name": ".net-csharp" + }, + "language_info": { + "name": "polyglot-notebook" + }, + "polyglot_notebook": { + "kernelInfo": { + "defaultKernelName": "csharp", + "items": [ + { + "aliases": [], + "name": ".NET" + }, + { + "aliases": [ + "C#", + "c#" + ], + "languageName": "C#", + "name": "csharp" + }, + { + "aliases": [ + "F#", + "f#" + ], + "languageName": "F#", + "name": "fsharp" + }, + { + "aliases": [], + "languageName": "HTML", + "name": "html" + }, + { + "aliases": [], + "languageName": "KQL", + "name": "kql" + }, + { + "aliases": [], + "languageName": "Mermaid", + "name": "mermaid" + }, + { + "aliases": [ + "powershell" + ], + "languageName": "PowerShell", + "name": "pwsh" + }, + { + "aliases": [], + "languageName": "SQL", + "name": "sql" + }, + { + "aliases": [], + "name": "value" + }, + { + "aliases": [ + "frontend" + ], + "name": "vscode" + } + ] + } + } + }, + "nbformat": 4, + "nbformat_minor": 2 +} diff --git a/src/graph-gallery/axis/graph_post_config.md b/src/graph-gallery/axis/graph_post_config.md new file mode 100644 index 0000000..4032c6d --- /dev/null +++ b/src/graph-gallery/axis/graph_post_config.md @@ -0,0 +1,9 @@ +--- +title: Advanced axis styling using Plotly.NET +author: Benedikt Venn +author_link: https://github.com/bvenn +graph_category: basic +date: 2023-10-06 +summary: In this post I will showcase an advanced example how multiple Plotly.NET plots can be visualized when Chart.Grid is unsufficient +preview_image: images/axisStyling.png +--- \ No newline at end of file diff --git a/src/images/axisStyling.png b/src/images/axisStyling.png new file mode 100644 index 0000000..9ab2801 Binary files /dev/null and b/src/images/axisStyling.png differ