kendo chart series legend in top on two lines

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.

Currently it shows like this:

[] series title 1 [] series title 2

I want:

[] series title 1 [] series title 2

setting legend.position = "right" shows them like I want, but on the side, so it must be set to "top"

Any way to achieve this?

Look here http://plnkr.co/edit/BVPb4AivJuks5VGr6FGz?p=preview

Chart is configured like this:

{
  "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 #"
  }
}

Answers


Set the legend orientation to vertical and then set the height as needed:

  legend: {
    position: "top",
    orientation: "vertical",
    height: 50    
  },

Need Your Help

List of Error With DNS

linux networking dns ip

I am working in linux system.

Alt text and titles on portfolio images and links - Waving portfolio

php wordpress wordpress-plugin

I am working on a project to help optimize the content of a site for search engines and all of the images and links within this plugin are not pulling the alt text and titles for the images and anc...