This sources is get data from Ajax. I hope that the percentage value with price value will appear in the same space. I made a percentage axis, but the difference with the price axis is too big. This is because the price value is very bigger than the percentage value. How to fix it ?
// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.numberFormatter.numberFormat = "#,###";
categoryAxis.renderer.inversed = true;
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.cellStartLocation = 0.1;
categoryAxis.renderer.cellEndLocation = 0.9;
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.opposite = true;
var valueAxis1 = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis1.renderer.opposite = true;
valueAxis1.guides = data.margin_percent;
valueAxis1.min = 0;
valueAxis1.max = 100;
// Create series
function createSeries(field, name) {
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = field;
series.dataFields.categoryY = "year";
series.name = name;
series.columns.template.tooltipText = "{name}: [bold]{valueX}[/]";
series.columns.template.height = am4core.percent(100);
series.sequencedInterpolation = true;
var valueLabel = series.bullets.push(new am4charts.LabelBullet());
valueLabel.label.text = "{valueX}";
valueLabel.label.horizontalCenter = "left";
valueLabel.label.dx = 10;
valueLabel.label.hideOversized = false;
valueLabel.label.truncate = false;
var categoryLabel = series.bullets.push(new am4charts.LabelBullet());
categoryLabel.label.text = "{name}";
categoryLabel.label.horizontalCenter = "right";
categoryLabel.label.dx = -10;
categoryLabel.label.fill = am4core.color("#fff");
categoryLabel.label.hideOversized = false;
categoryLabel.label.truncate = false;
}
createSeries("year_sales", "sales");
createSeries("year_cost", "cost");
var lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.valueX = "margin_percent";
lineSeries.dataFields.categoryY = "year";
lineSeries.name = "margin";
lineSeries.stroke = am4core.color("#fdd400");
lineSeries.strokeWidth = 3;
lineSeries.tooltipText = "margin in {categoryY}: {valueX.value}";
Related
I'm using Amchart 4 In Angular 10 and want to reduce space between two columns.
I have tried so many ways but didn't solve this issue
Could you please someone help me with how to reduce those spaces between columns.
is there any elegant solution?
let chart = am4core.create("authorisedChartDiv", am4charts.XYChart);
chart.data = chartData;
// Modify chart's colors
chart.colors.list = [
am4core.color("#1297e0"),
am4core.color("#5ad146")
];
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 100;
categoryAxis.renderer.labels.template.disabled = true;
chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "visits";
series.dataFields.categoryX = "country";
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series.columns.template.fillOpacity = .8;
series.columns.template.width = am4core.percent(20);
var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 1;
columnTemplate.strokeOpacity = 0;
========
See attached screenshot for more understanding
this.browserOnly(() => {
am4core.useTheme(am4themes_material);
am4core.useTheme(am4themes_animated);
let chart = am4core.create("authorisedChartDiv", am4charts.XYChart);
chart.data = chartData;
// Modify chart's colors
chart.colors.list = [
am4core.color("#1297e0"),
am4core.color("#5ad146")
];
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 100;
categoryAxis.renderer.labels.template.disabled = true;
chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "visits";
series.dataFields.categoryX = "country";
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series.columns.template.fillOpacity = .8;
series.columns.template.width = am4core.percent(20);
var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 1;
columnTemplate.strokeOpacity = 0;
// Add distinctive colors for each column using adapter
series.columns.template.adapter.add("fill", (fill, target) => {
return chart.colors.getIndex(target.dataItem.index);
});
#authorisedChartDiv {
width: 100%;
height: 250px;
}
<div id="authorisedChartDiv"></div>
I guess this parameter are the key:
categoryAxis.renderer.cellStartLocation = 0.2
categoryAxis.renderer.cellEndLocation = 0.8
More info at: https://www.amcharts.com/docs/v4/tutorials/managing-width-and-spacing-of-column-series/
In a Amcharts4 line chart, the chart fill color comes from 2 different places. Lineseries.propertyFields.fill and range.contents.fill.
I get a the color Hex value used by Lineseries.propertyFields.fill from a Ajax Call.
part of the back-end code:
if (temps == "2020-08-11T07:15:00.000Z") {Color = "#5476ff"};
JSlist.add(["value":prod,"date":temps,"lineColor":Color]);
writeJSON("myJSONAnswer": JSlist);
I then use series.propertyFields.fill = "lineColor"; to color specific areas of the graph.
This works well.
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.fillOpacity = 0.5;
series.propertyFields.stroke = "lineColor";
series.propertyFields.fill = "lineColor";
though I also want to color other ranges of the graph using range.contents.fill = am4core.color("#808080");
var range = dateAxis.createSeriesRange(series);
range.date = new Date("2020-08-11T09:00:00.000Z");
range.endDate = new Date("2020-08-11T09:30:00.000Z");
range.contents.stroke = am4core.color("#808080");
range.contents.fill = am4core.color("#808080");
range.contents.fillOpacity = 0.6;
//https://www.amcharts.com/docs/v4/concepts/axes/axis-ranges/#Using_with_series
If I comment these 3 lines, I can see the colored range. Otherwise it's overridden by it.
series.fillOpacity = 0.5;
series.propertyFields.stroke = "lineColor";
series.propertyFields.fill = "lineColor";
I want range.contents.fill = am4core.color("#808080"); to override series.propertyFields.stroke = "lineColor";
How can I do that?
I tried implementing your Amcharts code and it seems to be able to display the range just fine, although I have to change range.contents.fillOpacity value to 1 in order for it to be noticeable.
Try running the snippet and see if this is what you intended.
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("chartdiv", am4charts.XYChart);
var data = [];
var value = 50;
for(var i = 0; i < 300; i++){
var date = new Date();
date.setHours(0,0,0,0);
date.setDate(i);
value -= Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
data.push({date:date, value: value, lineColor: "#5476ff"});
}
chart.data = data;
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 60;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.tooltipText = "{value}"
series.fillOpacity = 0.5;
series.propertyFields.stroke = "lineColor";
series.propertyFields.fill = "lineColor";
var range = dateAxis.createSeriesRange(series);
range.date = new Date("2020-08-11T09:00:00.000Z");
range.endDate = new Date("2020-10-11T09:30:00.000Z");
range.contents.stroke = am4core.color("#808080");
range.contents.fill = am4core.color("#808080");
range.contents.fillOpacity = 1;
series.tooltip.pointerOrientation = "vertical";
chart.cursor = new am4charts.XYCursor();
chart.cursor.snapToSeries = series;
chart.cursor.xAxis = dateAxis;
#chartdiv {
width: 100%;
height: 500px;
}
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
EDIT: You can override the propertyFields property of series by creating a "ready" event listener and replacing the range.content colors AFTER the chart has been rendered.
var chart = am4core.create("chartdiv", am4charts.XYChart);
var data = [];
var value = 50;
for(var i = 0; i < 300; i++){
var date = new Date();
date.setHours(0,0,0,0);
date.setDate(i);
value -= Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
data.push({date:date, value: value, lineColor: "#5476ff", rangeColor: "#000000"});
}
chart.data = data;
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 60;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.tooltipText = "{value}"
series.fillOpacity = 0.5;
series.propertyFields.stroke = "lineColor";
series.propertyFields.fill = "lineColor";
var range = dateAxis.createSeriesRange(series);
range.date = new Date("2020-08-11T09:00:00.000Z");
range.endDate = new Date("2020-10-11T09:30:00.000Z");
range.contents.stroke = am4core.color("#808080");
range.contents.fillOpacity = 1;
series.tooltip.pointerOrientation = "vertical";
chart.cursor = new am4charts.XYCursor();
chart.cursor.snapToSeries = series;
chart.cursor.xAxis = dateAxis;
//Event listener to replace the content color after chart has been rendered, thus overriding propertyFields
chart.events.on("ready", () =>{
range.contents.children.values.forEach(item => {
item.stroke = am4core.color("#808080");
item.fill = am4core.color("#808080");
});
});
#chartdiv {
width: 100%;
height: 500px;
}
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
I have this little task to create a function graph using amCharts.
Thing is that I need the cursor enabled, but also the zoom disabled, so I can adjust the graph to a background image.
The documentation says that zoom is disabled with chart.zoomEnabled = false;, but it doesn't seem to work, and I don't know what could I be missing.
Thanks!
<style>
.graphContainer {
width: 500px;
height: 500px;
}
</style>
<script src="node_modules/ng"></script>
<script> let targetGroup =2; </script>
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/plugins/forceDirected.js"></script>
<script src="https://cdn.amcharts.com/lib/4/plugins/piechart.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div class = "graphContainer" id="divElasticidad"></div>
<script type="text/javascript">
let sensor = { "value": 85 };
let mostrarComoPorcentajes = true;
</script>
<script type="text/javascript">
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Check if use percent or full value
let ejeX = "X";
let ejeY = "Y";
if (mostrarComoPorcentajes){
ejeX = "x";
ejeY = "y";
}
// Create chart instance
var chart = am4core.create("divElasticidad", am4charts.XYChart);
chart.paddingRight = 20;
chart.zoomEnabled = false;
// Add data
let A = 1;
let data = [];
for (let i = 0; i < 1001; i++) {
data.push({
"x": i / 10,
"X": 1715.2 * i / 10 / 100,
"y": A * i/10,
"Y": A * 1715.2 * i / 10 / 100
});
}
let sensor = { "value": 85 }
let dataSensor = [{
"x": sensor.value,
"X": 1715.2 * sensor.value / 100,
"y": A * sensor.value,
"Y": A * 1715.2 * sensor.value / 100
}];
chart.data = data;
/* Background Image */
var image = chart.createChild(am4core.Image);
image.align = "center";
image.href = "imagenFondoFuncionElasticidad.png";
image.isMeasured = false;
image.width = am4core.percent(100);
image.height = am4core.percent(100);
image.x = am4core.percent(50);
image.y = am4core.percent(50);
image.zIndex = -1000;
image.horizontalCenter = "middle";
image.verticalCenter = "middle"
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = ejeX;
categoryAxis.renderer.minGridDistance = 50;
categoryAxis.renderer.grid.template.location = 0.5;
categoryAxis.startLocation = 0.5;
categoryAxis.endLocation = 0.5;
categoryAxis.min = -100;
categoryAxis.max = 1500;
// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.baseValue = 0;
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = ejeY;
series.dataFields.categoryX = ejeX;
series.strokeWidth = 2;
series.tensionX = 0.77;
series.data = data;
var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.valueY = ejeY;
series2.dataFields.categoryX = ejeX;
series2.strokeWidth = 2;
series2.tensionX = 0.77;
series2.data = dataSensor;
let bullet2 = series2.bullets.push(new am4charts.Bullet());
let circle2 = bullet2.createChild(am4core.Circle);
circle2.width = 8;
circle2.height = 8;
circle2.horizontalCenter = "middle";
circle2.verticalCenter = "middle";
circle2.stroke = am4core.color("#999999");
circle2.strokeWidth = 2;
circle2.fill = am4core.color("#555555");
// bullet is added because we add tooltip to a bullet for it to change color
var bullet = series.bullets.push(new am4charts.Bullet());
bullet.tooltipText = "{valueY}";
bullet.adapter.add("fill", function(fill, target) {
if (target.dataItem.valueY < 0) {
return am4core.color("#FF0000");
}
return fill;
})
var range = valueAxis.createSeriesRange(series);
range.value = 0;
range.endValue = -1000;
range.contents.stroke = am4core.color("#FF0000");
range.contents.fill = range.contents.stroke;
chart.cursor = new am4charts.XYCursor();
chart.cursor.behaviour = "none";
});
</script>
There is no such property called zoomEnabled. You might be thinking of mouseZoomEnabled, which is a v3 property.
If you want to disable cursor zooming in v4, set the cursor behavior to "none" as documented here. Note that the property name is using the American English spelling of behavior, which does not have the u.
chart.cursor.behavior = "none";
The bullets on my amchart4 chart are not on the line. Why are they out of alignment? How can I put them on the line? the code does not seem to have an option to realign? there are no obvious errors in the code? unless this is being caused from css or other code on website?
<script>
am4core.ready(function() {
am4core.useTheme(am4themes_animated);
var chart = am4core.createFromConfig({
"data": <?php echo $a?>
}, "chartdiv", am4charts.XYChart);
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd";
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "balance_amount";
series.dataFields.dateX = "balance_date";
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.strokeWidth = 2;
bullet.circle.radius = 4;
bullet.circle.fill = am4core.color("#fff");
var bullethover = bullet.states.create("hover");
bullethover.properties.scale = 1.3;
var range = valueAxis.createSeriesRange(series);
range.value = 0;
range.endValue = -1000;
range.contents.stroke = chart.colors.getIndex(4);
range.contents.fill = range.contents.stroke;
range.contents.strokeOpacity = 0.7;
range.contents.fillOpacity = 0.1;
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "panXY";
chart.cursor.xAxis = dateAxis;
chart.cursor.snapToSeries = series;
series.strokeWidth = 3; // 3px
series.tensionX = 0.8;
series.tensionY = 0.8;
valueAxis.renderer.grid.template.disabled = true;
dateAxis.renderer.grid.template.disabled = true;
chart.events.on("ready", function () {
dateAxis.zoom({start:0, end:1});
});
}); // end am4core.ready()
</script>
I have a js file which uses amchart,
I'm having a problem of total percentage in Donut chart not having the value as 100%.
I followed their doc AmPieChart#adjustPrecision
But still even after setting
charti.adjustPrecision= true; the total percentage is not tallied to 100%
Below is my piece of code.
chart = new AmCharts.AmPieChart();
chart.colors = ["#7498BF", "#76B900"];
if(combineRow){
chart.groupPercent = 5;
}
chart.startDuration = 0;
chart.dataProvider = dataJson;
chart.titleField = "category";
chart.descriptionField = "description";
chart.valueField = "amount";
chart.radius = "30%";
chart.outlineThickness = 2;
chart.sequencedAnimation = false;
chart.startEffect = "bounce";
chart.startRadius="30";
chart.colorField = "color";
chart.startDuration = 0;
chart.innerRadius = "30%";
chart.labelsEnabled = false;
chart.labelRadius = "-1";
chart.hideLabelsPercent="3";
chart.balloonText="[[description]]: [[percents]]% ($[[value]])";
chart.adjustPrecision= true;
legend = new AmCharts.AmLegend();
legend.align = "center";
legend.markerType = "square";
legend.markerLabelGap = 5;
legend.markerSize = 12;
legend.marginTop = 0;
legend.marginBottom = 0;
legend.spacing = 20;
legend.position = "right";
legend.fontSize = 10;
legend.valueText = "[[percents]]%";
legend.valueWidth = 83;
chart.addLegend(legend);
chart.addListener("clickSlice", callBackFunction);
chart.write(containerId);
Can you help me out?