How do I remove the side scale axis in am-charts.
For eg. in this fiddle I want to remove the top scales and left scales.
what are the properties or methods that I need to manipulate.
A demo chart.
http://jsfiddle.net/JSTQW/
Currently, I am using this code for plotting the chart:
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData1; //data provider for chart
chart.categoryField = "year"; //this is the side category year field
chart.startDuration = 1; //this is the chart plotting time
chart.plotAreaBorderColor = "#ffffff"; //side div rectangular border
chart.plotAreaBorderAlpha = 15;
// this single line makes the chart a bar chart
chart.rotate = true;
chart.columnWidth=0.2;
// AXES
// Category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridPosition = "start";
categoryAxis.gridAlpha = 0.1;
categoryAxis.axisAlpha = 0;
// Value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisAlpha = 0;
valueAxis.gridAlpha = 0.1;
valueAxis.position = "top";
valueAxis.maximum = 100;
chart.addValueAxis(valueAxis);
// GRAPHS
// first graph
var graph1 = new AmCharts.AmGraph();
graph1.type = "column";
graph1.title = "Income";
graph1.valueField = "income";
graph1.balloonText = "Income:[[value]]";
graph1.lineAlpha = 0;
graph1.fillColors = "#7fb5b7";
graph1.fillAlphas = 1;
chart.addGraph(graph1);
// second graph
var graph2 = new AmCharts.AmGraph();
graph2.type = "column";
graph2.title = "Expenses";
graph2.valueField = "expenses";
graph2.balloonText = "Expenses:[[value]]";
graph2.lineAlpha = 0;
graph2.fillColors = "#999999";
graph2.fillAlphas = 1;
chart.addGraph(graph2);
// LEGEND
//var legend = new AmCharts.AmLegend();
// chart.addLegend(legend);
chart.creditsPosition = "top-right";
// WRITE
chart.write("chartdiv1");
The accepted answer is no longer valid for amcharts4, now you can do this with:
valueAxis.renderer.labels.template.disabled = true;
And you might also want to disable the tooltip:
valueAxis.tooltip.disabled = true;
By setting valueAxis.labelsEnabled value you can get this.
Just try :
valueAxis.labelsEnabled = false;
Related
I have an XYChart but unfortunately the values vary a lot and the ratio of the bars is not good.
I thought it shouldn't be a problem to set a minimum height for the bars to make it look better, but after over an hour I still haven't found what I was looking for.
Does this function really not exist or am I just too stupid to find it?
Here's my code:
chart.data = data;
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "ch";
categoryAxis.renderer.minGridDistance = 1; // lable size
categoryAxis.renderer.labels.template.rotation = 360;
categoryAxis.tooltip.disabled = true;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.minWidth = 50;
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.sequencedInterpolation = true;
series.dataFields.valueY = "pu";
series.dataFields.categoryX = "ch";
series.tooltipText = "[{categoryX}: bold]{valueY}[/]";
series.columns.template.strokeWidth = 0;
series.tooltip.pointerOrientation = "vertical";
series.columns.template.column.cornerRadiusTopLeft = 10;
series.columns.template.column.cornerRadiusTopRight = 10;
series.columns.template.column.fillOpacity = 1;
var hoverState = series.columns.template.column.states.create("hover");
hoverState.properties.fillOpacity = 1;
series.columns.template.adapter.add("fill", function(fill, target) {
return chart.colors.getIndex(target.dataItem.index);
});
chart.cursor = new am4charts.XYCursor();
And the chart:
Thanks for your help!
You can't specify a minimum height for a column as that would change its value. You can try using an axis break to remove a portion of the axis range to make smaller values look a little bigger:
axisBreak = valueAxis.axisBreaks.create();
axisBreak.startValue = 20;
axisBreak.endValue = 40;
axisBreak.breakSize = 0.05;
Adjust the values as needed. There's also a demo of this with a mouseover effect to remove the break on the demos page here.
As the title suggests, when there is only one bar (can happen with more, but I prefer to focus on that problem), the bar is extremely small.
Here's my plotting code (the relevant part in my opinion):
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "uri";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 10;
categoryAxis.renderer.labels.template.horizontalCenter = "right";
categoryAxis.renderer.labels.template.verticalCenter = "middle";
categoryAxis.renderer.labels.template.rotation = 315;
categoryAxis.tooltip.disabled = true;
categoryAxis.renderer.minHeight = 110;
categoryAxis.renderer.labels.template.adapter.add
("textOutput", function(text) {return text.substring(text.lastIndexOf("/")+1);});
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.minWidth = 50;
valueAxis.logarithmic = true;
valueAxis.tooltip.disabled = true;
This happens when a category with a yAxis value that is close to 10, 100, 1000 and so on.
I would like the bar to be higher. What do I need to do?
I am okay all the line types under graph but I don't need their vertical represents
morever I have only one axis and yaxis values in my chart but multiple lines.
How can I customize this amchart sample or find any suitable chart for my need?
Practically every component in the chart has a disabled property that you can use to hide or reveal. To get rid of the line and labels, simply set the disabled property to true to remove them, similar to how the grid was disabled:
valueAxis.renderer.line.disabled = true; //disables axis line
valueAxis.renderer.labels.template.disabled = true; //disables labels
valueAxis.renderer.grid.template.disabled = true; //disables grid
Demo:
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Increase contrast by taking evey second color
chart.colors.step = 2;
// Add data
chart.data = generateChartData();
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
// Create series
function createAxisAndSeries(field, name, bullet) {
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = field;
series.dataFields.dateX = "date";
series.strokeWidth = 2;
series.yAxis = valueAxis;
series.name = name;
series.tooltipText = "{name}: [bold]{valueY}[/]";
series.tensionX = 0.8;
var interfaceColors = new am4core.InterfaceColorSet();
switch(bullet) {
case "triangle":
var bullet = series.bullets.push(new am4charts.Bullet());
bullet.width = 12;
bullet.height = 12;
bullet.horizontalCenter = "middle";
bullet.verticalCenter = "middle";
var triangle = bullet.createChild(am4core.Triangle);
triangle.stroke = interfaceColors.getFor("background");
triangle.strokeWidth = 2;
triangle.direction = "top";
triangle.width = 12;
triangle.height = 12;
break;
case "rectangle":
var bullet = series.bullets.push(new am4charts.Bullet());
bullet.width = 10;
bullet.height = 10;
bullet.horizontalCenter = "middle";
bullet.verticalCenter = "middle";
var rectangle = bullet.createChild(am4core.Rectangle);
rectangle.stroke = interfaceColors.getFor("background");
rectangle.strokeWidth = 2;
rectangle.width = 10;
rectangle.height = 10;
break;
default:
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.stroke = interfaceColors.getFor("background");
bullet.circle.strokeWidth = 2;
break;
}
valueAxis.renderer.line.disabled = true;
valueAxis.renderer.labels.template.disabled = true;
valueAxis.renderer.grid.template.disabled = true;
}
createAxisAndSeries("visits", "Visits", "circle");
createAxisAndSeries("views", "Views", "triangle");
createAxisAndSeries("hits", "Hits", "rectangle");
// Add legend
chart.legend = new am4charts.Legend();
// Add cursor
chart.cursor = new am4charts.XYCursor();
// generate some random data, quite different range
function generateChartData() {
var chartData = [];
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 100);
firstDate.setHours(0, 0, 0, 0);
var visits = 1600;
var hits = 2900;
var views = 8700;
for (var i = 0; i < 15; i++) {
// we create date objects here. In your data, you can have date strings
// and then set format of your dates using chart.dataDateFormat property,
// however when possible, use date objects, as this will speed up chart rendering.
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
visits += Math.round((Math.random()<0.5?1:-1)*Math.random()*10);
hits += Math.round((Math.random()<0.5?1:-1)*Math.random()*10);
views += Math.round((Math.random()<0.5?1:-1)*Math.random()*10);
chartData.push({
date: newDate,
visits: visits,
hits: hits,
views: views
});
}
return chartData;
}
#chartdiv {
width: 100%;
height: 500px;
}
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>
multiple-value-axes remove 3rd axis from chart.
Only two axis will show.
I am working on mobile screen only application and using AMCharts 4 in Angular 5. I have tried many different tricks and solutions to make the the line chart horizontally scrollable while displaying only a portion of the data given at any one time without having to display the scrollbar to no avail.
Below is my code to generate the chart:
this.data = [{
id: 156
tran_amount: "125.0"
value_date: "2019-02-05T12:00:46.173"
}, {
tran_amount: "12345.0"
value_date: "2019-01-05T12:00:46.173"
}];
let chart = am4core.create("amchart-container", am4charts.XYChart);
chart.data = [];
let categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
categoryAxis.dataFields.date = "value_date";
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.zoom({start: 0.8, end: 1, priority: 'end'});
valueAxis.renderer.labels.template.disabled = true;
// valueAxis.title.text = "Account Balance";
// valueAxis.renderer.labels.template.adapter.add("text", function(text, target) {
// return "" ;
// });
let lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.valueY = "tran_amount";
lineSeries.dataFields.dateX = "value_date";
chart.cursor = new am4charts.XYCursor();
// chart.cursor.element.addStyle({})
chart.cursor.behavior = 'panX';
// chart.cursor.disabled = true;
// chart.cursor.marginLeft = 0;
chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarX.height = new am4core.Percent(0);
chart.scrollbarX.width = new am4core.Percent(10);
// chart.scrollbarX.disabled = true;
chart.zoomOutButton.disabled = true;
chart.swipeable = true;
chart.events.on('ready', () => {
// setTimeout(() => valueAxis.zoom({start: 0, end: 0.2, priority: 'start'}), 300);
chart.maxZoomFactor = 32;
chart.zoomToIndexes(this.data.length - 1 < 0 ? 0 : this.data.length - 1, this.data.length);
console.log('ready');
})'
this.chart.data = this.data;
The code has a lot of problems. Here is a cleaned up, working example where the chart will scroll if you do that with touch:
let chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = [{
tran_amount: 125.0,
value_date: new Date("2019-01-05T12:00:00.000")
}, {
tran_amount: 12345.0,
value_date: new Date("2019-02-05T12:00:00.000")
}, {
tran_amount: 12345.0,
value_date: new Date("2019-03-05T12:00:00.000")
}];
let categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
categoryAxis.start = 0.7;
categoryAxis.keepSelection = true;
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
let lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.valueY = "tran_amount";
lineSeries.dataFields.dateX = "value_date";
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = 'panX';
chart.scrollbarX = new am4core.Scrollbar();
chart.zoomOutButton.disabled = true;
chart.swipeable = true;
I'm a very green newb attempting to understand textures and geometries. I don't know what's wrong with my code, someone have one idea....
var loader = new THREE.STLLoader();
loader.load('../Programa/imagens/imagem.stl',function (geometry){
var geometria = new THREE.Geometry().fromBufferGeometry(geometry);
geometria.computeBoundingBox();
var max = geometria.boundingBox.max,
min = geometria.boundingBox.min;
var offset = new THREE.Vector2(0 - min.x, 0 - min.y);
var range = new THREE.Vector2(max.x - min.x, max.y - min.y);
var faces = geometria.faces;
geometria.faceVertexUvs[0] = [];
for(var i = 0; i < faces.length; i++){
var v1 = geometria.vertices[faces[i].a],
...``
geometria.faceVertexUvs[0].push([
new THREE.Vector2((v1.x + offset.x)/range.x, (v1.y + offset.y)/range.y),
...
]);
}
geometria.name = "Projeto 1";
var material = new THREE.MeshPhongMaterial({
map: THREE.ImageUtils.loadTexture('../Programa/imagens/uvmapping.jpg')
});
var mesh = new THREE.Mesh(geometria, material);
geometria.uvsNeedUpdate = true;
geometria.colorsNeedUpdate = true;
mesh.scale.set(0.029, 0.029, 0.029);
scene.add(geometria);
});