CODEWITHSUNDEEP
chartskendo-uikendo-chart
Steen
Steen

Reputation: 2877

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

Upvotes: 1

Views: 1689

Answers (1)

ezanker
ezanker

Reputation: 24738

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

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

Upvotes: 2

Related Questions