Pie & donut graphs

 
 
General CSS for pie & donut graphs

#chartdiv {
  width: 100%;
  height: 300px;
}

Amcharts theme for pie & donut graphs

function amchartsRyteDesign(target) {
  if (target instanceof am4core.InterfaceColorSet) {
    target.setFor("disabledBackground", am4core.color("#77859c"));
    target.setFor("grid", am4core.color("#f4f7fa"));
    target.setFor("text", am4core.color("#415068"));
    target.setFor("alternativeBackground", am4core.color("#000"));
  }

  if (target instanceof am4core.ColorSet) {
    target.list = [
      am4core.color("#0c4b4f"),
      am4core.color("#1d6f75"),
      am4core.color("#36959c"),
      am4core.color("#57bbc2"),
      am4core.color("#7ee0e7"),
      ];
  }
}
 
am4core.useTheme(amchartsRyteDesign);

Pie & donut graph components

Pie & donut graph balloon

21.04.2042

Clicks38+25 since 11.04.2042

Impressions77-1323 since 11.04.2042

Click-through rate9%+6.4% since 11.04.2042

Position66-64.4 since 11.04.2042

 
 
CSS for the line graph balloon

.amcharts-balloon-div {
  width: 220px;
  padding: 8px 16px;
  text-align: left;
  color: #fff;
  border-radius: 3px;
  background: #212b36;
}
 
.amcharts-balloon-div > div {
  max-width: unset !important;
  text-align: left !important;
  color: inherit !important;
  font-size: 12px;
}
 
.amcharts-balloon-label {
  overflow: hidden;
}
 
.amcharts-balloon-label .amcharts-balloon-key {
  float: left;
  max-width: 200px;
  margin: 0 16px 0 0;
}
 
.amcharts-balloon-label .amcharts-balloon-value {
  float: right;
  text-align: right;
  font-weight: 700;
}
 
.amcharts-balloon-label .amcharts-balloon-delta {
  width: 100%;
  float: left;
  margin: 0 0 0 18px;
  color: rgba(255, 255, 255, .5);
}
 
.amcharts-balloon-top {
  margin: 0 0 4px;
  color: #fff;
  font: 700 12px/26px "Lato", sans-serif;
}
 
.amcharts-balloon-bubble {
  width: 10px;
  height: 10px;
  float: left;
  margin: 5px 8px 0 0;
  border-radius: 50%;
  background: #f5f5fd;
}