General CSS for pie & donut graphs
#chartdiv {
width: 100%;
height: 300px;
}
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);
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;
}
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;
}