Back

Inline Single Line Legend

If there is not enough space to fit all legend items, the visual will display them as a horizontally scrollable list when using 'inline' displayMode. In this example, the 'height' for legend was limited to 10, which provided enough vertical space for a single line of legend items.

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 
const series = [
  { name: "Series of Applesauce", id: "A", stack: "default", data: { index: 1 } },
  { name: "Series of Banana Split", id: "B", stack: "default", data: { index: 2 } },
  { name: "Series of Cantaloupe", id: "C", stack: "default", data: { index: 3 } },
  { name: "Series of Date Cake", id: "D", stack: "default", data: { index: 4 } },
  { name: "Series of Eggplant", id: "E", stack: "default", data: { index: 5 } },
  { name: "Series of Fig Tree", id: "F", stack: "default", data: { index: 6 } },
  { name: "Series of Grapefruit", id: "G", stack: "default", data: { index: 7 } },
  { name: "Series of Oranges", id: "H", stack: "default", data: { index: 8 } },
];
function genRandomData(tstamp) {
  const val = [tstamp];
  const numSeries = series.length;
  for(let i = 0; i < numSeries; i++) {
    val.push(Math.random() * 2000);
  }
  return val;
}

const settings = {
  container: "demo",
  data: {
    units: ["1 minute", "1 hour"],
    dataFunction: function (from, to, step, success, fail) {
      var delta = 5 * 60 * 1000;

      let tstamp = Date.UTC(2000, 0, 1);
      let last = Date.UTC(2000, 0, 3);
      let first = tstamp;
      let res = [];

      while (tstamp < last) {
        res.push(genRandomData(tstamp));
        tstamp += delta;
      }

      success({ unit: step, values: res, from: first, to: last, dataLimitFrom: first, dataLimitTo: last });
    }
  },
  series,
  legend: {
    enabled: true,
    displayMode: "inline",
    height: 10,
    panel: {
      side: "top",
    }
  }
};

new ZoomCharts.TimeChart(settings);

Data

Data 
//No separate data for this example