User:Timbaaa/sandbox/2

Horizontal annotations

{{Graph:Chart/sandbox
|colors=#ffff5ba0, #641050ff, #ffaaff00
|hannotatonslabel=label4, label5, label6
|hannotatonsline=4, 5, 6
|linewidths=2,4,0
|showSymbols=3,3,3
|symbolsShape=triangle_up, cross, banana
|type=line
|x=0,1,2,3
|y1=0,3.342,2.3423,5.32423
|y2=1,2.342,4.63,2.32423
|y3=3,1.342,2.63,6.32423
|legend=
}}

Vertical annotations

|colors=#ffff5ba0, #641050ff, #ffaaff00
|type=area
|vannotatonslabel=label1, label2, label3
|vannotatonsline=1, 2, 3
|x=0,1,2,3
|y1=0,3.342,2.3423,5.32423
|y2=1,2.342,4.63,2.32423
|y3=3,1.342,2.63,6.32423
|legend=
}}

chart JSON

{
   "legends": [],
   "scales": [
       {
           "type": "linear",
           "name": "x",
           "zero": false,
           "domain": {
               "data": "chart",
               "field": "x"
           },
           "range": "width",
           "nice": true
       },
       {
           "type": "linear",
           "name": "y",
           "domain": {
               "data": "chart",
               "field": "y"
           },
           "zero": true,
           "range": "height",
           "nice": true
       },
       {
           "domain": {
               "data": "chart",
               "field": "series"
           },
           "type": "ordinal",
           "name": "color",
           "range": [
               "#ff5ba0",
               "#1050ff",
               "#aaff00"
           ]
       },
       {
           "type": "ordinal",
           "name": "transparency",
           "range": [
               "1",
               "0.3921568627451",
               "1"
           ]
       }
   ],
   "version": 2,
   "marks": [
       {
           "type": "group",
           "marks": [
               {
                   "properties": {
                       "hover": {
                           "fill": {
                               "value": "red"
                           }
                       },
                       "update": {
                           "fillOpacity": {
                               "scale": "transparency",
                               "field": "series"
                           },
                           "fill": {
                               "scale": "color",
                               "field": "series"
                           }
                       },
                       "enter": {
                           "y": {
                               "scale": "y",
                               "field": "y"
                           },
                           "x": {
                               "scale": "x",
                               "field": "x"
                           },
                           "y2": {
                               "scale": "y",
                               "value": 0
                           },
                           "fill": {
                               "scale": "color",
                               "field": "series"
                           }
                       }
                   },
                   "type": "area"
               }
           ],
           "from": {
               "data": "chart",
               "transform": [
                   {
                       "groupby": [
                           "series"
                       ],
                       "type": "facet"
                   }
               ]
           }
       },
       {
           "type": "rule",
           "properties": {
               "update": {
                   "y": {
                       "value": 0
                   },
                   "x": {
                       "scale": "x",
                       "field": "x"
                   },
                   "opacity": {
                       "value": 0.75
                   },
                   "y2": {
                       "field": {
                           "group": "height"
                       }
                   },
                   "stroke": {
                       "value": "#54595d"
                   },
                   "strokeWidth": {
                       "value": "#54595d"
                   }
               }
           },
           "from": {
               "data": "v_anno"
           }
       },
       {
           "type": "text",
           "properties": {
               "update": {
                   "y": {
                       "offset": -3,
                       "field": {
                           "group": "height"
                       }
                   },
                   "x": {
                       "scale": "x",
                       "offset": 3,
                       "field": "x"
                   },
                   "opacity": {
                       "value": 0.75
                   },
                   "baseline": {
                       "value": "top"
                   },
                   "text": {
                       "field": "label"
                   },
                   "angle": {
                       "value": -90
                   },
                   "fill": {
                       "value": "#54595d"
                   }
               }
           },
           "from": {
               "data": "v_anno"
           }
       }
   ],
   "height": 200,
   "axes": [
       {
           "type": "x",
           "scale": "x",
           "format": "d",
           "properties": {
               "title": {
                   "fill": {
                       "value": "#54595d"
                   }
               },
               "grid": {
                   "stroke": {
                       "value": "#54595d"
                   }
               },
               "ticks": {
                   "stroke": {
                       "value": "#54595d"
                   }
               },
               "axis": {
                   "strokeWidth": {
                       "value": 2
                   },
                   "stroke": {
                       "value": "#54595d"
                   }
               },
               "labels": {
                   "fill": {
                       "value": "#54595d"
                   }
               }
           },
           "grid": false
       },
       {
           "type": "y",
           "scale": "y",
           "properties": {
               "title": {
                   "fill": {
                       "value": "#54595d"
                   }
               },
               "grid": {
                   "stroke": {
                       "value": "#54595d"
                   }
               },
               "ticks": {
                   "stroke": {
                       "value": "#54595d"
                   }
               },
               "axis": {
                   "strokeWidth": {
                       "value": 2
                   },
                   "stroke": {
                       "value": "#54595d"
                   }
               },
               "labels": {
                   "fill": {
                       "value": "#54595d"
                   }
               }
           },
           "grid": false
       }
   ],
   "data": [
       {
           "format": {
               "parse": {
                   "y": "number",
                   "x": "integer"
               },
               "type": "json"
           },
           "name": "chart",
           "values": [
               {
                   "y": 0,
                   "series": "y1",
                   "x": 0
               },
               {
                   "y": 3.342,
                   "series": "y1",
                   "x": 1
               },
               {
                   "y": 2.3423,
                   "series": "y1",
                   "x": 2
               },
               {
                   "y": 5.32423,
                   "series": "y1",
                   "x": 3
               },
               {
                   "y": 1,
                   "series": "y2",
                   "x": 0
               },
               {
                   "y": 2.342,
                   "series": "y2",
                   "x": 1
               },
               {
                   "y": 4.63,
                   "series": "y2",
                   "x": 2
               },
               {
                   "y": 2.32423,
                   "series": "y2",
                   "x": 3
               },
               {
                   "y": 3,
                   "series": "y3",
                   "x": 0
               },
               {
                   "y": 1.342,
                   "series": "y3",
                   "x": 1
               },
               {
                   "y": 2.63,
                   "series": "y3",
                   "x": 2
               },
               {
                   "y": 6.32423,
                   "series": "y3",
                   "x": 3
               }
           ]
       },
       {
           "format": {
               "parse": {
                   "x": "integer"
               },
               "type": "json"
           },
           "name": "v_anno",
           "values": [
               {
                   "label": "label1",
                   "x": "1"
               },
               {
                   "label": "label2",
                   "x": "2"
               },
               {
                   "label": "label3",
                   "x": "3"
               }
           ]
       }
   ],
   "width": 200

}

Debug