Layout

Different components of a chart, like title, axis-labels or legend can be positioned with the layout setting. Components are positioned relative to the chart center. Usually, all data of a chart is visualized in the center.

Positioning components

For each component, you can specify one of the possible positions that determines where the component is positioned relative to the center. Here's an example:


  //Possible positions: "left" | "right" | "top" | "bottom" | 
  // "inner-left" | "inner-bottom" | "inner-top" | "inner-right"
  var POS = "left";
  ReactiveChart.chart({
    element: "_chart1",
    type: "x",
    xAxis: {
      type: "discrete"
    },
    series: {
      shape: "column",
      series: [{
        data: [1, 2, 3, 4]
      }]
    },
    layout: [
      {
        position: POS,
        component: {
          type: "label",
          text: "COMPONENT",
          style: {
            background: "white"
          }
        }
      }]
  });

Components at the same position

Multiple components at the same position will be placed after each other, e.g:


  ReactiveChart.chart({
    element: "_chart3",
    type: "x",
    xAxis: {
      type: "discrete"
    },
    series: {
      shape: "column",
      series: [{
        data: [1, 2, 3, 4]
      }]
    },
    layout: [
      {
        position: "bottom",
        component: {
          type: "label",
          text: "COMPONENT 1",
          style: {
            background: "white"
          }
        }
      }, {
        position: "bottom",
        component: {
          type: "label",
          text: "COMPONENT 2",
          style: {
            background: "white"
          }
        }
      }]
  });

Relatively positioned components

A layout configuration can itself contain other layout configurations. This gives you the possibility to add components that are placed relative to a component instead of the center, e.g. to place "COMPONENT 2" left of "COMPONENT 1":


  ReactiveChart.chart({
    element: "_chart5",
    type: "x",
    xAxis: {
      type: "discrete"
    },
    series: {
      shape: "column",
      series: [{
        data: [1, 2, 3, 4]
      }]
    },
    layout: [
      {
        position: "bottom",
        component: {
          type: "label",
          text: "COMPONENT 1",
          style: {
            background: "white"
          }
        },
        layout: [{
          position: "left",
          component: {
            type: "label",
            text: "COMPONENT 2",
            style: {
              background: "white"
            }
          }
        }]
      }]
  });

Horizontal alignment

The halign property determines the horizontal alignment of the component

  
  //Possible values: "left" | "right" | "middle"
  var HALIGN = "left";
  ReactiveChart.chart({
    element: "_chart7",
    type: "x",
    xAxis: {
      type: "discrete"
    },
    series: {
      shape: "column",
      series: [{
        data: [1, 2, 3, 4]
      }]
    },
    layout: [
      {
        position: "bottom",
        component: {
          type: "label",
          text: "COMPONENT",
          style: {
            background: "white"
          }
        },
        halign: HALIGN
      }]
  });

Vertical alignment

The valign property determines the vertical alignment of the component

  
  //Possible values: "top" | "bottom" | "middle"
  var VALIGN = "top";
  ReactiveChart.chart({
    element: "_chart9",
    type: "x",
    xAxis: {
      type: "discrete"
    },
    series: {
      shape: "column",
      series: [{
        data: [1, 2, 3, 4]
      }]
    },
    layout: [
      {
        position: "left",
        component: {
          type: "label",
          text: "COMPONENT",
          style: {
            background: "white"
          }
        },
        valign: VALIGN
      }]
  });