Some part of legend is missing. How it possible to show full. Some time my label is long. I searched a lot but I am not found any thing
var chart = am4core.create("product_sale_chart", am4charts.PieChart);
// Add data
chart.data = [{
"product": "Brufen 200 mg",
"size": "94000"
}, {
"product": "Panadol Ford-20-Tablet-Pack",
"size": "387000"
}, {
"product": "Betnovit",
"size": "4340"
}]
chart.innerRadius = 100;
var label = chart.seriesContainer.createChild(am4core.Label);
label.text = "2019";
label.horizontalCenter = "middle";
label.verticalCenter = "middle";
label.fontSize = 50;
label.labelRadius = -500;
//label.paddingLeft = '50px !important';
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "size";
pieSeries.dataFields.category = "product";
This is because the labels are stretching outside the bounds of the chart. If this is Amcharts v3 you can reduce the labelRadius to bring them closer to the center.
EDIT
Now that I see your code it's clear you're using Amcharts v4, so instead of labelRadius you need to use the following:
pieSeries.labels.template.radius = am4core.percent(-40);
Here's a working pen
More on labels
Related
Is it possible to have multiple links in the same label? I would like to be able to click on "Data One" or "Data Two" and be directed to different urls.
var sourceLabel = chart.createChild(am4core.Label);
sourceLabel.text = "Source: Date one & Data Two";
sourceLabel.align = "right";
sourceLabel.interactionsEnabled = true;
sourceLabel.url = "https://data-one.html";
You can have two links in the same label if you use html instead of text:
sourceLabel.html = 'Data One & Data Two'
If you don't want to use html, then your only option is to create two separate labels.
var chart = am4core.create("chartdiv", am4charts.XYChart);
var sourceLabel = chart.createChild(am4core.Label);
sourceLabel.html = 'Data One & Data Two '
chart.data = [{
"category": "Research",
"value": 450
}, {
"category": "Marketing",
"value": 1200
}, {
"category": "Distribution",
"value": 1850
}];
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "value";
series.dataFields.categoryX = "category";
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>
I use chart.js 2.8.0 to create mainly pie and bar charts. The clickable legend on pie charts is really useful, filtering out unwanted data from the result.
When creating a chart there are two kinds of labels:
* An array of labels on chart level, label 1 corresponding to item 1 in each dataset.
* Dataset labels, one for each dataset.
A pie chart as standard get the chart label array turned into a legend with clickable labels, click on a label and that item is filtered out from the chart.
A bar chart, on the other hand, gets the labels shown below the bar but not clickable. Instead the legend here is made out of the dataset label. If you have more than one dataset, a whole dataset is filtered out if you click on that label.
Since I sometimes have several datasets I can not use the "trick" that consists of putting data item into a separate dataset (that was otherwise the closest to what I wanted that I found in my search, the "extra" clickable legend that would create would work as well). The situation is also that the end user should get a drop-down (or similar) so he, from the same data, can select chart type. So the soultion need to work both for pie and bar charts. the same data and (standard) code creates the two shown charts (except for the colors).
The question is now, as stated in the title: Is it possible to get clickable labels for a bar chart with the same filtering functionality as when the chart is of pie type?
I understand that it isn't doable by just setting some options, it would probably have to be done by creating a plugin, but is it at all doable? if so, any pointers for help?
If not clickable labels, maybe make the bars themselves clickable (with the same result)...?
With a slight change to the fiddle given by https://stackoverflow.com/users/3963330/tob%c3%adas in his answer here: Click events on Pie Charts in Chart.js I get a fiddle that also can handle multiple datasets, and on my second try I managed to hide a segment when I clicked on it. And then I relized that if it wasn't a pie chart there would be no clickable legend to use for unhiding that element - so that's not a solution for my bar charts.
Tried combining a couple of SO questions/answers (generating labels by #GRUNT : Bar labels in Legend) but can't get legend labels for bar charts to filter out segments instead of datasets.
Fiddle: https://jsfiddle.net/tommypeters/24ra6egy/9/
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var myNewChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
data: [300, 50, 100],
backgroundColor: [
"#F7464A",
"#46BFBD",
"#FDB45C"
]
},
{
data: [400, 60, 101],
backgroundColor: [
"#F7464A",
"#46BFBD",
"#FDB45C"
]
}
],
labels: [
"Red",
"Green",
"Yellow"
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
legend: {
labels: {
generateLabels: function(chart) {
var labels = chart.data.labels;
var dataset = chart.data.datasets[0];
var legend = labels.map(function(label, index) {
return {
datasetIndex: 0,
fillStyle: dataset.backgroundColor && dataset.backgroundColor[index],
strokeStyle: dataset.borderColor && dataset.borderColor[index],
lineWidth: dataset.borderWidth,
text: label
}
});
return legend;
}
}
}
}
});
canvas.onclick = function(evt) {
var activePoints = myNewChart.getElementsAtEvent(evt);
if (activePoints[0]) {
var chartData = activePoints[0]['_chart'].config.data;
var idx = activePoints[0]['_index'];
var dIndex = myNewChart.getDatasetAtEvent(evt)[0]._datasetIndex;
var label = chartData.labels[idx];
var value = chartData.datasets[dIndex].data[idx];
// Doesn't hide a slice but a whole dataset...
// var meta = myNewChart.getDatasetMeta(dIndex);
// meta.hidden = meta.hidden === null ? !myNewChart.data.datasets[dIndex].hidden : null;
// myNewChart.update();
var i, ilen, meta;
for (i = 0, ilen = (myNewChart.data.datasets || []).length; i < ilen; ++i) {
meta = myNewChart.getDatasetMeta(i);
if (meta.data[idx]) {
meta.data[idx].hidden = !meta.data[idx].hidden;
}
}
myNewChart.update();
var url = "http://example.com/?label=" + label + "&value=" + value;
console.log(url);
alert(url);
}
}
im try using Amchart plugin into my system. Chart successful appear when i run basic code for chart. Then im try to use a custom for loading indicator. But the problem is indicator for loading not stopping even chart is appear.
Below is the JS script
am4core.useTheme(am4themes_animated);
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = [{
"category": "Research",
"value": 450
}, {
"category": "Marketing",
"value": 1200
}, {
"category": "Distribution",
"value": 1850
}];
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
//categoryAxis.renderer.minGridDistance = 30;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "value";
series.dataFields.categoryX = "category";
var indicator;
var indicatorInterval;
function showIndicator() {
if (!indicator) {
indicator = chart.tooltipContainer.createChild(am4core.Container);
indicator.background.fill = am4core.color("#fff");
indicator.width = am4core.percent(100);
indicator.height = am4core.percent(100);
var indicatorLabel = indicator.createChild(am4core.Label);
indicatorLabel.text = "Loading stuff...";
indicatorLabel.align = "center";
indicatorLabel.valign = "middle";
indicatorLabel.dy = 50;
var hourglass = indicator.createChild(am4core.Image);
hourglass.href = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/hourglass.svg";
hourglass.align = "center";
hourglass.valign = "middle";
hourglass.horizontalCenter = "middle";
hourglass.verticalCenter = "middle";
hourglass.scale = 0.7;
}
indicator.hide(0);
indicator.show();
clearInterval(indicatorInterval);
indicatorInterval = setInterval(function() {
hourglass.animate([{
from: 0,
to: 360,
property: "rotation"
}], 2000);
}, 3000);
}
function hideIndicator() {
indicator.hide();
clearInterval(indicatorInterval);
}
showIndicator();
Below is the html code
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
im already try a few method, but no lucky for me. Any suggestion
On amchart4 documentation (https://www.amcharts.com/docs/v4/tutorials/custom-loading-indicator/), it only shows how you can create a custom loading indicator. It doesn't hook up hideIndicator() event when the chart is finished rendering.
There is a Ready event you can use now (https://github.com/amcharts/amcharts4/issues/436#issuecomment-441370242). You can just simply hook up hideIndicator() function to the Ready event:
...
chart.events.on("ready", function(ev){
hideIndicator();
});
...
fiddle: https://jsfiddle.net/davidliang2008/akpe5f4b/1/
I am currently working with pie charts in amCharts plugin. Sometimes I had to face no data in pie chart. In this scenario, amCharts loads no graph.
How can I handle no data in pie chart? Is there any method to display inactive pie chart (disabled pie chart or something)?
You can use AmCharts.addInitHandler function to set custom function to call before chart is drawn. You can use it to check if dataProvider is empty and make all kinds of modifications to the chart.
I.e.:
/**
* amCharts Plugin: handle empty pie chart
*/
AmCharts.addInitHandler(function(chart) {
// check if data is mepty
if (chart.dataProvider === undefined || chart.dataProvider.length === 0) {
// add some bogus data
var dp = {};
dp[chart.titleField] = "";
dp[chart.valueField] = 1;
chart.dataProvider.push(dp)
var dp = {};
dp[chart.titleField] = "";
dp[chart.valueField] = 1;
chart.dataProvider.push(dp)
var dp = {};
dp[chart.titleField] = "";
dp[chart.valueField] = 1;
chart.dataProvider.push(dp)
// disable slice labels and balloons
chart.labelsEnabled = false;
chart.balloonText = "";
// add label to let users know the chart is empty
chart.addLabel("50%", "50%", "The chart contains no data", "middle", 15);
// dim the whole chart
chart.alpha = 0.3;
}
}, ["pie"]);
var chart = AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "light",
"dataProvider": [],
"valueField": "value",
"titleField": "title"
});
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
I've been using a little d3 and am now exploring dimple. I am trying to create some pie charts. However, I want the x-axis value to be a subset of the actual values.
Here's what I have:
var svg = dimple.newSvg("body", 800, 600);
//data
var data = [{"Inst":"Two", "Finaid":"Grant", "Value":50},
{"Inst":"Two","Finaid":"None", "Value":10},
{"Inst":"Two","Finaid":"No", "Value": 30},
{"Inst":"One", "Finaid":"Grant", "Value":20},
{"Inst":"One","Finaid":"None", "Value":10},
{"Inst":"One","Finaid":"No", "Value": 30}];
//basic chart
var chart = new dimple.chart(svg, data);
console.log(data);
chart.setBounds(50,20,460,360)
chart.addCategoryAxis("y", "Inst")
chart.addMeasureAxis("x", "Value");
chart.addMeasureAxis("p", "Value");
chart.addMeasureAxis("z", "Value");
chart.addSeries("Finaid", dimple.plot.pie);
chart.addLegend(600,20,90,300, "left");
chart.draw();
So this works, but I want the x-axis value to only be the value of "Finaid":"Grant" something like chart.addMeasureAxis("x", {"Finaid":"Grant"}.Value);... although I realize that actual code does nothing.
Any suggestions? Thanks
Just filter it before plotting. In fact, dimple.js even offers a helpful function for just that.
var data = [{"Inst":"Two", "Finaid":"Grant", "Value":50},
{"Inst":"Two","Finaid":"None", "Value":10},
{"Inst":"Two","Finaid":"No", "Value": 30},
{"Inst":"One", "Finaid":"Grant", "Value":20},
{"Inst":"One","Finaid":"None", "Value":10},
{"Inst":"One","Finaid":"No", "Value": 30}];
var filteredData = dimple.filterData(data, "Finaid", "Grant");
// now make chart
var chart = new dimple.chart(svg, filteredData);