Positioning of grid and chart when they both are shown

Options

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div>
  <h2>How to show both grid and charts</h2>
  <p>
    To show both grid and charts simultaneously, set the
    <code>options.viewType</code> property to <code>"grid_charts"</code>.
  </p>
  <p>
    By default, charts are shown below the grid. You can choose another position
    for charts using the <code>options.chart.position</code> property.
  </p>
  <p>
    <a href="https://www.flexmonster.com/doc/options/" target="_blank"
    >Learn more about setting options in our documentation</a>.
  </p>
</div>

<div id="pivot-container"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

.fm-charts-color-1 {
  fill: rgba(0, 164, 90, 0.7) !important;
}

.fm-charts-color-2 {
  fill: rgba(223, 56, 0, 0.7) !important;
}

.fm-charts-color-3 {
  fill: rgba(255, 184, 0, 0.7) !important;
}

.fm-charts-color-4 {
  fill: rgba(109, 59, 216, 0.7) !important;  
}

.fm-charts-color-5 {
  fill: rgba(0, 117, 255, 0.7) !important;
}

.fm-charts-color-6 {
  fill: none !important;
}

JavaScript

let pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  height: 700,
  report: {
    dataSource: {
      filename: "data/data.csv",
    },
    options: {
      viewType: "grid_charts",
      chart: {
        type: "bar",
        position: "top",
      },
    },
    slice: {
      rows: [
        {
          uniqueName: "Category",
          filter: {
            exclude: ["category.[cars]"],
          },
        },
      ],
      columns: [{ uniqueName: "[Measures]" }],
      measures: [{ uniqueName: "Price" }],
    },
  },
})