title: kendo chart series legend in top on two lines
body: <p>I have an implementation of a chart where the legend must be in top for screen size reasons. My customer complains that it is hard to see the (in this case) two series titles. </p>
  
  <p>Currently it shows like this:</p>
  
  <p>[] series title 1  [] series title 2</p>
  
  <p>I want:</p>
  
  <p>[] series title 1<br>
  [] series title 2</p>
  
  <p>setting legend.position = "right" shows them like I want, but on the side, so it must be set to "top"</p>
  
  <p>Any way to achieve this?</p>
  
  <p>Look here <a href="http://plnkr.co/edit/BVPb4AivJuks5VGr6FGz?p=preview" rel="nofollow">http://plnkr.co/edit/BVPb4AivJuks5VGr6FGz?p=preview</a></p>
  
  <p>Chart is configured like this:</p>
  
  <pre><code>{
    "chartArea": {
      "font": "14px/1.714 \"roboto\", \"Arial\", \"Helvetica\", sans-serif",
      "width": 1000,
      "height": 333.3333333333333,
      "background": "",
      "border": {
        "color": ""
      }
    },
    "title": {
      "text": "",
      "font": "14px/1.714 \"roboto\", \"Arial\", \"Helvetica\", sans-serif"
    },
    "legend": {
      "position": "top"
    },
    "seriesDefaults": {
      "markers": {
        "visible": false
      }
    },
    "series": [
      {
        "type": "column",
        "name": "03-02-2016",
        "data": [
          0.110845970287301,
          0.0914614304545012,
          0.0828538550058511,
          0.0828538550056237,
          0.0897167892449033,
          0.178615728107161,
          0.178615728107161,
          0.178615728107161,
          0.178615728107161,
          0.0727362937236649,
          0,
          0
        ],
        "color": "#8f9b49"
      },
      {
        "type": "line",
        "name": "02-02-2016 (perioden før!)",
        "data": [
          0.110709412367669,
          0.0911219388724476,
          0.0911219388722202,
          0.0911219388724476,
          0.0911219388722202,
          0.0235651458583561,
          0.140159626241029,
          0.140159626241029,
          0.140159626241029,
          0.075608331711237,
          0.899526564965754,
          0.899526564965754,
          0.899526564965754,
          0.687138348237795,
          0.431259248819742,
          0.431259248819742,
          0.431259248819515,
          0.400167587908072,
          0.325565217391159,
          0.325565217391386,
          0.325565217391159,
          0.260910866318909,
          0.110845970287073,
          0.110845970287073
        ],
        "color": "#bdc779",
        "border": {
          "width": 1,
          "color": "#dddddd"
        }
      }
    ],
    "valueAxis": {
      "plotBands": [],
      "title": {
        "text": "kWh",
        "background": "none",
        "font": "14px/1.714 \"roboto\", \"Arial\", \"Helvetica\", sans-serif"
      },
      "labels": {
        "format": "{0}",
        "font": "12px/1.714 \"roboto\", \"Arial\", \"Helvetica\", sans-serif"
      },
      "line": {
        "visible": false
      },
      "axisCrossingValue": 0
    },
    "categoryAxis": {
      "majorGridLines": {
        "width": 0
      },
      "title": {
        "text": "Time",
        "background": "none",
        "font": "14px/1.714 \"roboto\", \"Arial\", \"Helvetica\", sans-serif"
      },
      "categories": [
        "00",
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23"
      ],
      "line": {
        "visible": false
      },
      "labels": {
        "padding": {
          "top": 4
        },
        "font": "12px/1.714 \"roboto\", \"Arial\", \"Helvetica\", sans-serif"
      }
    },
    "tooltip": {
      "visible": true,
      "format": "{0}m2",
      "template": "#= series.name # #= category #: #= value #"
    }
  }
  </code></pre>