{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   
   "source": [
    
   ]
  }
,
  {
   "cell_type": "code",
   "metadata": {
    "dotnet_interactive": {
     "language": "fsharp"
    },
    "polyglot_notebook": {
     "kernelName": "fsharp"
    }
   },
   "execution_count": null, "outputs": [],
   "source": [
    "#r \"nuget: Plotly.NET, 5.0.0\"\n",
    "#r \"nuget: Plotly.NET.Interactive, 5.0.0\"\n"
   ]
  }
,
  {
   "cell_type": "markdown",
   "metadata": {},
   
   "source": [
    "# Chart Templates\n",
    "\n",
    "[![Binder](https://plotly.net/img/badge-binder.svg)](https://mybinder.org/v2/gh/plotly/plotly.net/gh-pages?urlpath=/tree/home/jovyan/general/templates.ipynb)\u0026emsp;\n",
    "[![Notebook](https://plotly.net/img/badge-notebook.svg)](https://plotly.net/general/templates.ipynb)\n",
    "\n",
    "## Using premade templates\n",
    "\n",
    "Premade templates can be accessed via the `ChartTemplates` module. In fact, the `ChartTemplates.plotly` template is always active by default (see [global defaults](./00_5_defaults.html))\n",
    "\n"
   ]
  }
,
  {
   "cell_type": "code",
   "metadata": {
    "dotnet_interactive": {
     "language": "fsharp"
    },
    "polyglot_notebook": {
     "kernelName": "fsharp"
    }
   },
   "execution_count": 3, "outputs": [],
   "source": [
    "open Plotly.NET\n",
    "\n",
    "let lightMirrored =\n",
    "    Chart.Point(xy = [ 1, 2 ]) |\u003e Chart.withTemplate ChartTemplates.lightMirrored\n"
   ]
  }
,
  {
   "cell_type": "code",
   "metadata": {
    "dotnet_interactive": {
     "language": "fsharp"
    },
    "polyglot_notebook": {
     "kernelName": "fsharp"
    }
   },
   "execution_count": null, "outputs": [
          {
           "data": {
            "text/html": ["\u003cdiv\u003e\u003cdiv id=\"eddbe81e-52fa-410a-956a-8ad8978ac4d1\"\u003e\u003c!-- Plotly chart will be drawn inside this DIV --\u003e\u003c/div\u003e\u003cscript type=\"text/javascript\"\u003evar renderPlotly_eddbe81e52fa410a956a8ad8978ac4d1 = function() {",
"    var data = [{\"type\":\"scatter\",\"mode\":\"markers\",\"x\":[1],\"y\":[2],\"marker\":{},\"line\":{}}];",
"    var layout = {\"width\":600,\"height\":600,\"template\":{\"layout\":{\"paper_bgcolor\":\"white\",\"plot_bgcolor\":\"white\",\"xaxis\":{\"ticks\":\"inside\",\"mirror\":\"all\",\"showline\":true,\"zeroline\":true},\"yaxis\":{\"ticks\":\"inside\",\"mirror\":\"all\",\"showline\":true,\"zeroline\":true}},\"data\":{}}};",
"    var config = {\"responsive\":true};",
"    Plotly.newPlot(\u0027eddbe81e-52fa-410a-956a-8ad8978ac4d1\u0027, data, layout, config);",
"};",
"renderPlotly_eddbe81e52fa410a956a8ad8978ac4d1();",
"\u003c/script\u003e\u003c/div\u003e"]
        },
           "execution_count": null,
           "metadata": {},
           "output_type": "execute_result"
          }],
   "source": [
    "lightMirrored\n"
   ]
  }
,
  {
   "cell_type": "markdown",
   "metadata": {},
   
   "source": [
    "Here are the contents of the template `plotly` which is used by default for all charts: [https://github.com/plotly/Plotly.NET/blob/6e28decca64441320d8cffab5bcfee664b118c36/src/Plotly.NET/Templates/ChartTemplates.fs#L163-L665](https://github.com/plotly/Plotly.NET/blob/6e28decca64441320d8cffab5bcfee664b118c36/src/Plotly.NET/Templates/ChartTemplates.fs#L163-L665)\n",
    "\n",
    "## Creating custom templates\n",
    "\n",
    "Chart Templates consist of a `Layout` object and a collection of `Trace` objects. Both are used to set default values for all possible styling options:\n",
    "\n"
   ]
  }
,
  {
   "cell_type": "code",
   "metadata": {
    "dotnet_interactive": {
     "language": "fsharp"
    },
    "polyglot_notebook": {
     "kernelName": "fsharp"
    }
   },
   "execution_count": 5, "outputs": [],
   "source": [
    "open Plotly.NET.TraceObjects\n",
    "\n",
    "let layoutTemplate =\n",
    "    Layout.init (Title = Title.init (\"I will always be there now!\"))\n",
    "\n",
    "let traceTemplates =\n",
    "    [ Trace2D.initScatter (\n",
    "          Trace2DStyle.Scatter(Marker = Marker.init (Symbol = StyleParam.MarkerSymbol.ArrowLeft, Size = 20))\n",
    "      ) ]\n",
    "\n",
    "let myTemplate = Template.init (layoutTemplate, traceTemplates)\n",
    "\n",
    "let myTemplateExampleChart =\n",
    "    Chart.Point(xy = [ 1, 2 ]) |\u003e Chart.withTemplate myTemplate\n"
   ]
  }
,
  {
   "cell_type": "code",
   "metadata": {
    "dotnet_interactive": {
     "language": "fsharp"
    },
    "polyglot_notebook": {
     "kernelName": "fsharp"
    }
   },
   "execution_count": null, "outputs": [
          {
           "data": {
            "text/html": ["\u003cdiv\u003e\u003cdiv id=\"232c648c-376b-4cfd-b2b8-db5b6ab2f0f7\"\u003e\u003c!-- Plotly chart will be drawn inside this DIV --\u003e\u003c/div\u003e\u003cscript type=\"text/javascript\"\u003evar renderPlotly_232c648c376b4cfdb2b8db5b6ab2f0f7 = function() {",
"    var data = [{\"type\":\"scatter\",\"mode\":\"markers\",\"x\":[1],\"y\":[2],\"marker\":{},\"line\":{}}];",
"    var layout = {\"width\":600,\"height\":600,\"template\":{\"layout\":{\"title\":{\"text\":\"I will always be there now!\"}},\"data\":{\"scatter\":[{\"marker\":{\"size\":20,\"symbol\":\"47\"}}]}}};",
"    var config = {\"responsive\":true};",
"    Plotly.newPlot(\u0027232c648c-376b-4cfd-b2b8-db5b6ab2f0f7\u0027, data, layout, config);",
"};",
"renderPlotly_232c648c376b4cfdb2b8db5b6ab2f0f7();",
"\u003c/script\u003e\u003c/div\u003e"]
        },
           "execution_count": null,
           "metadata": {},
           "output_type": "execute_result"
          }],
   "source": [
    "myTemplateExampleChart\n"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": ".NET (F#)",
   "language": "F#",
   "name": ".net-fsharp"
  },
  "language_info": {
   "file_extension": ".fs",
   "mimetype": "text/x-fsharp",
   "name": "polyglot-notebook",
   "pygments_lexer": "fsharp"
  },
  "polyglot_notebook": {
   "kernelInfo": {
    "defaultKernelName": "fsharp",
    "items": [
     {
      "aliases": [],
      "languageName": "fsharp",
      "name": "fsharp"
     }
    ]
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}