Dynamically adjust the line chart's circle radius

Flexmonster Pivot Charts

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>How to dynamically adjust the line chart's circle radius</h2>
  <p>
    This example demonstrates how you can customize the chart's circle radius.
    Drag the slider to try different radiuses.
  </p>
  <p>
    To set a custom circle radius, specify the <code>r</code> property in the
    <code>#fm-pivot-view .fm-chart .fm-circle</code> CSS selector.
  </p>
  <p>
    <a
      href="https://www.flexmonster.com/doc/customizing-pivot-charts/"
      target="_blank"
    >Visit our docs to learn more about customizing the charts</a>.
  </p>
</div>

<div class="slide-container">
  <input type="range" min="2" max="12" value="8" id="circleRadius" />
  <span class="slider-value">Circle radius: <span id="demo"></span></span>
</div>

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

CSS

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

#fm-pivot-view .fm-chart .fm-circle {
  r: 8;
}

/* Charts Style  */

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

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

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

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

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

#fm-pivot-view .fm-bar,
#fm-pivot-view .fm-charts-view .fm-chart-legend ul li .fm-icon-display,
#fm-pivot-view .fm-line,
#fm-pivot-view .fm-arc path,
#fm-pivot-view .fm-bar-stack,
#fm-pivot-view .fm-scatter-point {
  opacity: 70% !important;
}

#fm-yAxis-label,
#fm-xAxis > text,
#fm-yAxis > text {
  display: none;
}

.slide-container {
  display: inline-flex;
  align-items: center;
}

.slide-container > input {
  -webkit-appearance: none;
  appearance: none;
  height: 7px;
  background: #cdcdcf;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

.slide-container > input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #df3800;
  cursor: pointer;
}

.slide-container > input::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #df3800;
  cursor: pointer;
}


.slide-container > input:hover {
  opacity: 1;
}

.slider-value {
  margin-left: 10px;
  font-size: 15px;
  line-height: 1.5;
}

JavaScript

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  beforetoolbarcreated: customizeToolbar,
  width: "100%",
  height: 500,
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/demos/pivot-charts-demo-data.json"
    },
    slice: {
      rows: [{ uniqueName: "Order Date.Year" }],
      columns: [{ uniqueName: "[Measures]" }],
      measures: [
        {
          uniqueName: "Revenue",
          formula: "sum(\"Amount\") * sum(\"Price\")",
          individual: true,
          caption: "Revenue",
          format: "currency",
          active: true
        },
      	{
          uniqueName: "Orders",
          aggregation: "count"
        }
      ]
    },
    options: {
      viewType: "charts",
     	chart: {
        type: "column_line"
      }
    },
    formats: [
    	{
      	name: "currency",
        currencySymbol: "$"
      }
    ]
  }
});

var slider = document.getElementById("circleRadius");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
  adjustCircles(this.value);
}

function adjustCircles(radius) {
  let circles = document.querySelectorAll("#fm-pivot-view .fm-chart .fm-circle");
  for (let i = 0; i < circles.length; i++) {
    circles[i].style.r = radius;
  }
}

pivot.on("afterchartdraw", () => {
  adjustCircles(slider.value);
})

function customizeToolbar(toolbar) {
  // get all tabs
  var tabs = toolbar.getTabs();
  toolbar.getTabs = function() {
    //remove all default tabs
    tabs = [];
    // add new tab
    tabs.unshift({
      id: "fm-tab-column_line_chart",
      title: "Combo",
      handler: showColumnLineChart,
      icon: this.icons.charts_column_line
    });
    tabs.unshift({
      id: "fm-tab-line_chart",
      title: "Line",
      handler: showLineChart,
      icon:...