CODEWITHSUNDEEP
javascriptcsshtmlpie-chartamcharts
Usama nadeem
Usama nadeem

Reputation: 431

AmPieChart value and percentage

Is there any way to remove value and percentage in AamPieCharts. I want to show only description on mouse hover. There should be a way to do this. Can we hide "valueField" in AmPieCharts ? I tried to remove it but doesn't work. Tried many ways but failed. I have attached my code below that includes html5, css, js.

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>

<link rel="stylesheet" 
href="https://www.amcharts.com/lib/3/plugins/export/export.css" 
type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

CSS

#chartdiv {
width: 100%;
height: 500px;
font-size: 11px;
}

.amcharts-pie-slice {
transform: scale(1);
transform-origin: 50% 50%;
transition-duration: 0.3s;
transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
cursor: pointer;
box-shadow: 0 0 30px 0 #000;
}

.amcharts-pie-slice:hover {
transform: scale(1.1);
filter: url(#shadow);
}

JS

var chart = AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "light",
"addClassNames": true,
"innerRadius": "0%",
"defs": {
"filter": [{
  "id": "shadow",
  "width": "200%",
  "height": "200%",
  "feOffset": {
    "result": "offOut",
    "in": "SourceAlpha",
    "dx": 0,
    "dy": 0
  },
  "feGaussianBlur": {
    "result": "blurOut",
    "in": "offOut",
    "stdDeviation": 5
  },
  "feBlend": {
    "in": "SourceGraphic",
    "in2": "blurOut",
    "mode": "normal"
  }
}]
},
"labelRadius": -50,
"labelText": "[[country]]",
"dataProvider": [ {
"country": "Business",
"text":"Description Here",
"value": 50
}, {
"country": "Projects",
"text":"Description Here",
"value": 50
}, {
"country": "Services",
"text":"Description Here",
"value": 50
 }, {
"country": "Admin",
"text":"Description Here",
"value": 50
}],
"valueField": "value",
"titleField": "text",
});

chart.addListener("init", handleInit);

chart.addListener("rollOverSlice", function(e) {
handleRollOver(e);
});

function handleInit(){
chart.legend.addListener("rollOverItem", handleRollOver);
}

function handleRollOver(e){
var wedge = e.dataItem.wedge.node;
wedge.parentNode.appendChild(wedge);
}

Upvotes: 0

Views: 1590

Answers (1)

xorspark
xorspark

Reputation: 16012

If you want to remove the percentage and value from the mouseover, you have to customize the balloonText property. The default value is "[[title]]: [[percents]]% ([[value]])\n[[description]]", so all you have to do is set the balloonText property to "[[text]]" or "[[title]]" (since it's your titleField) to pull your description string.

var chart = AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "light",
"addClassNames": true,
"innerRadius": "0%",
"defs": {
"filter": [{
  "id": "shadow",
  "width": "200%",
  "height": "200%",
  "feOffset": {
    "result": "offOut",
    "in": "SourceAlpha",
    "dx": 0,
    "dy": 0
  },
  "feGaussianBlur": {
    "result": "blurOut",
    "in": "offOut",
    "stdDeviation": 5
  },
  "feBlend": {
    "in": "SourceGraphic",
    "in2": "blurOut",
    "mode": "normal"
  }
}]
},
"labelRadius": -50,
"labelText": "[[country]]",
"balloonText": "[[text]]",
"dataProvider": [ {
"country": "Business",
"text":"Description Here",
"value": 50
}, {
"country": "Projects",
"text":"Description Here",
"value": 50
}, {
"country": "Services",
"text":"Description Here",
"value": 50
 }, {
"country": "Admin",
"text":"Description Here",
"value": 50
}],
"valueField": "value",
"titleField": "text",
"legend": {}
});

chart.addListener("init", handleInit);

chart.addListener("rollOverSlice", function(e) {
handleRollOver(e);
});

function handleInit(){
chart.legend.addListener("rollOverItem", handleRollOver);
}

function handleRollOver(e){
var wedge = e.dataItem.wedge.node;
wedge.parentNode.appendChild(wedge);
}
#chartdiv {
width: 100%;
height: 500px;
font-size: 11px;
}

.amcharts-pie-slice {
transform: scale(1);
transform-origin: 50% 50%;
transition-duration: 0.3s;
transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
cursor: pointer;
box-shadow: 0 0 30px 0 #000;
}

.amcharts-pie-slice:hover {
transform: scale(1.1);
filter: url(#shadow);
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>

<link rel="stylesheet" 
href="https://www.amcharts.com/lib/3/plugins/export/export.css" 
type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

Upvotes: 1

Related Questions