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?
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.
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 trying to change the default colour in Dimple.js, I want each bar to be red, I can change the colour by individually citing each entry in the series, but I can't seem to change the colour across the whole chart, once I set the buyerchartSeries to null.
var myChart = new dimple.chart(svg2_3, data);
myChart.setBounds(10, 15, "92%", "84%");
myChart.addMeasureAxis("x", "sum");
var y = myChart.addCategoryAxis("y", "service");
y.addOrderRule("sum");
y.hidden = true;
var buyerchartSeries = myChart.addSeries(null, dimple.plot.bar);
myChart.assignColor(null,"red")
myChart.draw();
Your solution is fine but if you also have some non-null series identifiers which you would like to colour separately it won't work. You can use assignColor but you need to assign to "All":
var myChart = new dimple.chart(svg2_3, data);
myChart.setBounds(10, 15, "92%", "84%");
myChart.addMeasureAxis("x", "sum");
var y = myChart.addCategoryAxis("y", "service");
y.addOrderRule("sum");
y.hidden = true;
var buyerchartSeries = myChart.addSeries(null, dimple.plot.bar);
// This is all I've changed
myChart.assignColor("All", "red");
myChart.draw();
I've found the answer... it might be an egregious hack, or it might be the best way to do this, (advice welcome).
Rather than assign a colour to a 'null' series, which obviously won't work, I've changed the defaultColor of the chart. If you only have one colour it has the correct effect of imposing a single colour on all the bars.
var myChart = new dimple.chart(svg3_1, dt);
myChart.setBounds(4, 20, "88%", "80%");
myChart.addMeasureAxis("x", "sum");
var y = myChart.addCategoryAxis("y", "supplier");
y.hidden = true;
supplierChartSeries = myChart.addSeries("supplier", dimple.plot.bar);
myChart.defaultColors = [
new dimple.color("#3498db", "#2980b9", 1), // blue
];
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;