I need to place title & subtitle under my chart in amCharts library. I tried to use label but I can only place a label in chart area. Anyone got an idea?
Titles can only be placed on the top of the chart. You can use labels to mimic the title functionality by using percent-based x/y coordinates, but you have to set your own margins as labels don't automatically shift the chart margins like titles do. You have to set autoMargins to false and then set your own chart margins, especially marginBottom, in order to give your labels enough space to render on the bottom:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"autoMargins": false,
"marginLeft": 50,
"marginRight": 20,
"marginBottom": 100,
"allLabels": [{
"x": "50%",
"align": "middle",
"y": "89%",
"bold": true,
"size": 16,
"text": "My Chart Title"
},{
"x": "50%",
"align": "middle",
"y": "94%",
"text": "My Chart Sub-Title"
}],
// ...
});
Here's a demo
Related
How can I add background color to valueAxes guides label?
Seems like there is no options that we can set or I just really dont know what it is.
This is current setup that I have in amcharts
$chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": $data_trade,
"valueAxes": [ {
"position": "right",
"guides": [ {
"value": $tickValue,
"label": $tickValue,
"position": "right",
"dashLength": 0,
"axisThickness": 1,
"fillColor": "#000",
"axisAlpha": 1,
"fillAlpha": 1,
"color": "#000",
"fontSize": 16,
"backgroundColor": "#008D00",
"labelColorField": "red",
},
],
} ],
../
} );
please see image for reference
image-screenshot
Im new here, I hope I can get help
Thanks
There isn't a built-in way to do this currently but you can use the same technique in this demo to create a colored box around your label in the drawn event by changing the selector to .amcharts-axis-label.amcharts-guide to target the guide label and apply your color there. Note that the demo doesn't set individual colors, but the drawn event gives you access to the chart object if you want to pull the color from your custom backgroundColor properties:
AmCharts.makeChart("...", {
// ...
"valueAxes": [{
// ...
"guides": [{
"value": 4.5,
"label": "4.5",
"backgroundColor": "#22ff11" //custom property for drawn event
}, {
"value": 7.5,
"label": "7.5",
"backgroundColor": "#11ddff"
}]
}],
// ...
"listeners": [{
"event": "drawn",
"method": addLabelBoxes
}]
});
function addLabelBoxes(event) {
var labels = document.querySelectorAll(".amcharts-axis-label.amcharts-guide");
Array.prototype.forEach.call(labels, function(label, i) {
var parent = label.parentNode;
var labelText = label.childNodes[0].textContent; //get guide label from SVG
var svgRect = label.getBBox();
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
// find the matching guide label in the chart object
var guide = event.chart.valueAxes[0].guides.filter(function(guide) {
return guide.label == labelText;
});
rect.setAttribute("x", svgRect.x);
rect.setAttribute("y", svgRect.y);
rect.setAttribute("transform", label.getAttribute("transform"))
rect.setAttribute("width", svgRect.width);
rect.setAttribute("height", svgRect.height);
rect.setAttribute("fill", (guide && guide.length && guide[0].backgroundColor ? guide[0].backgroundColor : "#FFD32F")); //apply background from guide if it exists
rect.setAttribute("stroke", (guide && guide.length && guide[0].backgroundColor ? guide[0].backgroundColor : "#4857FF")); //same for the border
rect.setAttribute("opacity", 1);
parent.insertBefore(rect, label);
});
}
Demo
I'm trying to plot a stacked column graph. Instead of the various components being one on top of the other, they are appearing one next to the other.
Here's the property I'm using
var stackedProps= {
type: "serial",
titles: [{
text: "STACKED CHART",
size: 24,
alpha: 5
}],
valueAxis: [{
stackType: "regular",
axisAlpha: 0.3,
gridAlpha: 0
}],
graphs: [{
balloonText: "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
fillAlphas: 0.8,
lineAlpha: 0.3,
title: "AAAA",
type: "column",
color: "#000000",
valueField: "AAAA"
}, {
balloonText: "<b>[[title]]</b><br><span style='font-size:5px'>[[category]]: <b>[[value]]</b></span>",
fillAlphas: 0.8,
lineAlpha: 0.3,
title: "BBBB",
type: "column",
color: "#000000",
valueField: "BBBB"
}
};
My understanding is that the property stackType: "regular" is responsible for stacking the items one on top of the other.
Could I please request help to identify the mistake?
The serial charts support multiple value axes. Therefore the property is valueAxes (plural form).
If you have it as "valueAxis" (as it seems the case in your code), it is ignored by the chart like any other unknown property, hence columns not being stacked.
So bottom line, if you want to stack your columns, you define valueAxes. If you don't want to stack them, you can completely leave out that part. (unless you want to set some other value axis settings)
I've tried to gather information about if it is possible to put a different image located at the bottom of every column in a 100% stacked bar chart.
I've seen that is possible to modify some attributes of category labels and put images just above every bar as http://www.amcharts.com/demos/column-chart-images-top/ but I need just the opposite.
In other words, I want to make the base of the column has an image loaded, replacing x axis and category label.
Thanks in advance.
Unfortunately, Category axis does not allow using images in place of category labels.
There's also no way to make the custom bullets from graphs "trickle" outside plot area.
What you can do is to drop those custom icons right down just above category axis line.
To do that you will need:
1) Add additional fields to your data that would contain all zero values.
2) Add a separate graph that would use those fields and display custom bullets.
3) Make the "bullet graph" non-stackable (stackable: false), not clustered (clustered: false), and generally invisible (visibleInLegend: false, fillAlphas: 0, lineAlpha: 0, showBalloon: false)
Here's a working example:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": [{
"name": "John",
"points": 35022,
"color": "#7F8DA9",
"zero": 0,
"bullet": "//www.amcharts.com/lib/3/images/0.gif"
}, {
"name": "Damon",
"points": 65456,
"color": "#FEC514",
"zero": 0,
"bullet": "//www.amcharts.com/lib/3/images/1.gif"
}, {
"name": "Patrick",
"points": 45724,
"color": "#DB4C3C",
"zero": 0,
"bullet": "//www.amcharts.com/lib/3/images/2.gif"
}, {
"name": "Mark",
"points": 13654,
"color": "#DAF0FD",
"zero": 0,
"bullet": "//www.amcharts.com//lib/3/images/3.gif"
}],
"valueAxes": [{
"maximum": 80000,
"minimum": 0,
"axisAlpha": 0,
"dashLength": 4,
"position": "left"
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<span style='font-size:13px;'>[[category]]: <b>[[value]]</b></span>",
"colorField": "color",
"fillAlphas": 0.8,
"lineAlpha": 0,
"type": "column",
"valueField": "points"
}, {
"showBalloon": false,
"bulletOffset": 16,
"bulletSize": 34,
"customBulletField": "bullet",
"fillAlphas": 0,
"lineAlpha": 0,
"type": "column",
"visibleInLegend": false,
"clustered": false,
"stackable": false,
"valueField": "zero"
}],
"categoryField": "name",
"categoryAxis": {
"axisAlpha": 0,
"gridAlpha": 0,
"tickLength": 0
}
});
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv" style="width: 100%; height: 200px;"></div>
Additionally, if you don't need the text labels on the category axis, you can set it's labelsEnabled: false property.
We have using stacked amChart(serial) for showing graph. We have added a filter functionality for graphs.The user can filter data according to week,month and quarter. We have using bootstrap. The amChart is placed in div having class "col-md-6". When user select week filter the amchart having 52 lables.At that time the bars are very thin. It is very difficult to analyze the data.So we want to increase the label frequency. We have set label frequency into 5 but it is not changing
AmCharts.makeChart("stackedChart", {
"type": "serial",
"theme": "light",
"legend": {
"position": "right",
"useGraphSettings": true,
},
"dataProvider": data,
"valueAxes": [{
"stackType": "regular",
"axisAlpha": 0.3,
"gridAlpha": 0,
"position": "left",
"gridCount": 5
}],
"plotAreaFillAlphas": 0.1,
"graphs": graph,
"categoryField": "Period",
"categoryAxis": {
"gridPosition": "start",
"labelFrequency": 5,
},
"export": {
"enabled": true
}
});
labelFrequency is probably not the best way to go about it. It basically means display a label every X'th grid line.
What you are looking for is pre-zooming the chart. For that you can use maxSelectedSeries. I.e.:
AmCharts.makeChart("stackedChart", {
...
"maxSelectedSeries": 5,
...
});
Also, if you are going to have pre-zoomed chart, you will also need the means to scroll it. For that you need to add a scrolbar:
AmCharts.makeChart("stackedChart", {
...
"maxSelectedSeries": 5,
"chartScrollbar": {},
...
});
Here's the whole chart with the above applied:
AmCharts.makeChart( "stackedChart", {
"type": "serial",
"theme": "light",
"maxSelectedSeries": 5,
"chartScrollbar": {},
"legend": {
"position": "right",
"useGraphSettings": true,
},
"dataProvider": data,
"valueAxes": [ {
"stackType": "regular",
"axisAlpha": 0.3,
"gridAlpha": 0,
"position": "left",
"gridCount": 5
} ],
"plotAreaFillAlphas": 0.1,
"graphs": graph,
"categoryField": "Period",
"categoryAxis": {
"gridPosition": "start"
},
"export": {
"enabled": true
}
} );
stockGraphs: [{
closeField: "close",
highField: "high",
lowField: "low",
openField: "open",
fillColors: "#009900",
lineColor: "#009900",
fillColorsField: "#009900",
lineAlpha: 1,
fillAlphas: 0.9,
negativeFillColors: "#000000",
negativeLineColor: "#000000",
title: "Price:",
type: "candlestick",
valueField: "close"'
},
The negative bars are coloured black. However the positive bars are: #ff6600.
Here is the Fiddle: http://jsfiddle.net/s8s8bbfd/
Add useDataSetColors: false to stockGraphs[0].
But the negative color doesn't apply on balloon. I don't understand why, with ohlc chart, it works...