Develop Reference

Graph line becomes thin when value is 0

Made this with Amcharts V3
I've set line thickness in my graph to 3. Whenever the readings are 0, the graph line will then lie on x axis for those values, and here the thickness becomes 1. But if the values are more than 0, then the thickness is correct of 3.
Here is the function which renders the graphs:
function drawChart(chartData, color)
{
var ballon = '<div class="ballon"><p class="heading">[[date_full]]</p><div class="values"><span class="chart_label">Score</span><span class="chart_reading">[[score]]</span></div></div>';
return AmCharts.makeChart("score_chart",
{
"type": "serial",
"theme": "none",
"dataProvider": chartData,
"valueAxes": [
{
"axisAlpha": 0,
"gridAlpha": 0.5,
"position": "left",
"minimum": 0,
"maximum": 100,
"labelsEnabled": true,
"gridColor": "#E9EBED",
"axisColor": "#E9EBED",
"color": "#68737D",
"fontSize": 13
}],
"graphs": [
{
"id": "g1",
"balloonText": ballon,
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"title": "red line",
"valueField": "score",
"useLineColorForBulletBorder": true,
"lineColor": color,
"lineThickness": 3,
"bulletBorderThickness": 3,
"balloonColor": "white",
"balloon": {
"borderAlpha": 0,
"borderThickness": 0,
"fillAlpha": 0
},
"bulletSize": 10
}],
"chartCursor":
{
"limitToGraph": "g1",
"cursorColor": color
},
"categoryField": "date",
"categoryAxis":
{
"parseDates": false,
"axisColor": "lightgrey",
"gridAlpha": 0,
"color": "#68737D",
"fontSize": 13
}
});

How to edit the Amcharts X Axis?

I'm using the Amcharts in a react application using the following lib
amcharts3-react.
This is my Amcharts config:
export const arabicCharts = {
"type": "serial",
"theme": "light",
"autoMarginOffset": 20,
"graphs": [{
"id": "g1",
"balloonText": "[[value]]",
"bullet": "diamond",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"hideBulletsCount": 50,
"title": "red line",
"valueField": "ay",
"lineAlpha": 0.8,
"lineThickness": 2,
"lineColor": "#b0de09",
"fillAlphas": 0,
"useLineColorForBulletBorder": true
}, {
"id": "g2",
"balloonText": "[[value]]",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"hideBulletsCount": 50,
"title": "red line",
"valueField": "by",
"lineAlpha": 0.8,
"lineThickness": 2,
"lineColor": "#fcd202",
"fillAlphas": 0,
"useLineColorForBulletBorder": true
}],
"chartCursor": {
"limitToGraph": "g1"
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"axisColor": "#DADADA",
"dashLength": 1,
"minorGridEnabled": true
},
"valueAxes": [{
"axisAlpha": 0,
"position": "right",
},{
"axisAlpha": 1,
"position": "bottom",
}],
};
valueAxes is only applied for the Y Axis by adding his title.
Why is not applied for the X Axis? valueAxes second object is not working.
Thanks.

I already answered on Github, but for anyone else that's curious (note that this relates to AmCharts 3):
Serial charts in AmCharts 3 can only have one horizontal/X axis (or Y if rotate: true is set), and that axis must be a category axis, which isn't fully numeric. You can set the second value axis as a second Y axis (position: "left" or position: "right"), but you also need to specify IDs and assign your graphs to them, e.g.
graphs: [{
// ...
"valueAxis": "v1, //use right hand axis
}, {
// ...
valueAxis: "v2" //use left hand axis
}],
// ...
valueAxes: [{
"position": "right",
"id": "v1",
// ...
}, {
"position": "left",
"id": "v2"
}]
If you need both a numeric X and Y axis, consider using v3's XY chart instead.

Amcharts chartCursor show at last position

Amcharts: Force-show balloon over specific point.
I want chart cursor on last date in chart.
Please see my console in image. i have generated error.
Here is a amcharts doc link: https://www.amcharts.com/kbase/force-show-balloon-over-specific-data-point/
Working sample: http://jsfiddle.net/amcharts/JdTuA/
But i am unable to do it. Here is my code and error is also pasted in image. Please guide.
<script>
(function () {
var chartWeight = AmCharts.makeChart("{{ div }}", {
"type": "serial",
"theme": "light",
"dataProvider": {{ data.json|raw }},
"creditsPosition": "top-right",
"synchronizeGrid":false,
"zoomOutText": "",
"valueAxes": [
{
"id":"v_kg",
//"title": "Bodyweight in kg",
//"title": "Körpergewicht in kg",
"axisColor": "#2A3B55",
"axisThickness": 0,
"gridAlpha": 0,
"offset": 0,
"axisAlpha": 0,
"position": "left",
"labelsEnabled": false,
"minimum": {{ 0.99 * data.chartsOptions.all.minKg }},
"maximum": {{ 1.01 * data.chartsOptions.all.maxKg }},
"autoGridCount": false,
"gridCount": 200,
"strictMinMax": true
},
{
"id":"v_ratio",
//"title": "Bodyfat in %",
//"title": "Körperfett in %",
"axisColor": "#A46A1F",
"axisThickness": 0,
"gridAlpha": 0,
"offset": 0,
"axisAlpha": 0,
// "position": "right",
"labelsEnabled": false,
"minimum": {{ (0.9 * data.chartsOptions.all.minFat)|round(1) }},
"maximum": {{ (1.05 * data.chartsOptions.all.maxFat)|round(1) }},
"autoGridCount": false,
"gridCount": 200,
"strictMinMax": true
},
{
"id":"v_lean",
//"title": "Lean Mass in kg",
//"title": "Muskelmasse in kg",
"axisColor": "#80B3FF",
"axisThickness": 0,
"gridAlpha": 0,
"offset": 0,
"axisAlpha": 0,
// "position": "right",
"labelsEnabled": false
},
],
"graphs": [{
"valueAxis": "v_kg",
"lineColor": "#2A3B55",
"lineThickness": 2,
"title": "Bodyweight",
"valueField": "kgBodyweight",
"fillAlphas": 0,
"balloonText": "Weight: [[value]]kg",
"legendValueText": "[[value]]kg",
}, {
//"valueAxis": "v_lean",
"valueAxis": "v_kg",
"lineColor": "#80B3FF",
"lineThickness": 2,
"title": "Lean Mass",
"valueField": "kgLeanmass",
"fillAlphas": 0,
"balloonText": "Lean Mass: [[value]]kg",
"legendValueText": "[[value]]kg"
}, {
"valueAxis": "v_ratio",
"lineColor": "#A46A1F",
"lineThickness": 2,
"title": "Fat",
"valueField": "ratioBodyfat",
"fillAlphas": 0,
"balloonText": "Fat: [[value]]%",
"legendValueText": "[[value]]%"
}],
"chartCursor": {
"cursorPosition": 'mouse',
"leaveCursor": true,
"valueBalloonsEnabled": true,
},
"chartScrollbar": {
"selectedBackgroundColor": "#7F7F7F",
"backgroundColor": "#e9e9e9",
"offset": 12,
"selectedBackgroundAlpha": 1,
"backgroundAlpha": 1
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"axisColor": "#DADADA",
"minorGridEnabled": true,
"startOnAxis": true,
"gridAlpha": 0.07,
},
"export": {
"enabled": false,
},
"legend": {
"useGraphSettings": true,
},
});
chartCursor = new AmCharts.ChartCursor();
var date1 = new Date();
chartCursor.showCursorAt(date1);
chartWeight.addListener("dataUpdated", function () {
chartWeight.zoomToIndexes(chartWeight.dataProvider.length - 60, chartWeight.dataProvider.length);
});
})();
</script>

The new chart cursor object you created is not attached to a chart, which is why it's complaining about an undefined categoryAxis. When translating the OO-based demos to the makeChart/JSON method, you only need to call the method directly from the chart object since the JSON structure maps directly to how the chart is structured internally. Rather than create a new object, just call yourChartObject.chartCursor.showCursorAt(<your category value here>). In this situation, you're better off doing this in the init event so the chart will be fully instantiated before you call the method:
AmCharts.makeChart("...", {
// ...
"listeners": [{
"event": "init",
"method": function(e) {
e.chart.showCursorAt(/* your date value */);
}
}]
})
Demo below:
(function() {
var chartWeight = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": getData(),
"creditsPosition": "top-right",
"synchronizeGrid": false,
"zoomOutText": "",
"valueAxes": [{
"id": "v_kg",
//"title": "Bodyweight in kg",
//"title": "Körpergewicht in kg",
"axisColor": "#2A3B55",
"axisThickness": 0,
"gridAlpha": 0,
"offset": 0,
"axisAlpha": 0,
"position": "left",
"labelsEnabled": false,
// "minimum": {{ 0.99 * data.chartsOptions.all.minKg }},
// "maximum": {{ 1.01 * data.chartsOptions.all.maxKg }},
"autoGridCount": false,
"gridCount": 200,
"strictMinMax": true
},
{
"id": "v_ratio",
//"title": "Bodyfat in %",
//"title": "Körperfett in %",
"axisColor": "#A46A1F",
"axisThickness": 0,
"gridAlpha": 0,
"offset": 0,
"axisAlpha": 0,
// "position": "right",
"labelsEnabled": false,
// "minimum": {{ (0.9 * data.chartsOptions.all.minFat)|round(1) }},
// "maximum": {{ (1.05 * data.chartsOptions.all.maxFat)|round(1) }},
"autoGridCount": false,
"gridCount": 200,
"strictMinMax": true
},
{
"id": "v_lean",
//"title": "Lean Mass in kg",
//"title": "Muskelmasse in kg",
"axisColor": "#80B3FF",
"axisThickness": 0,
"gridAlpha": 0,
"offset": 0,
"axisAlpha": 0,
// "position": "right",
"labelsEnabled": false
},
],
"graphs": [{
"valueAxis": "v_kg",
"lineColor": "#2A3B55",
"lineThickness": 2,
"title": "Bodyweight",
"valueField": "kgBodyweight",
"fillAlphas": 0,
"balloonText": "Weight: [[value]]kg",
"legendValueText": "[[value]]kg",
}, {
//"valueAxis": "v_lean",
"valueAxis": "v_kg",
"lineColor": "#80B3FF",
"lineThickness": 2,
"title": "Lean Mass",
"valueField": "kgLeanmass",
"fillAlphas": 0,
"balloonText": "Lean Mass: [[value]]kg",
"legendValueText": "[[value]]kg"
}, {
"valueAxis": "v_ratio",
"lineColor": "#A46A1F",
"lineThickness": 2,
"title": "Fat",
"valueField": "ratioBodyfat",
"fillAlphas": 0,
"balloonText": "Fat: [[value]]%",
"legendValueText": "[[value]]%"
}],
"chartCursor": {
"cursorPosition": 'mouse',
"leaveCursor": true,
"valueBalloonsEnabled": true,
},
"chartScrollbar": {
"selectedBackgroundColor": "#7F7F7F",
"backgroundColor": "#e9e9e9",
"offset": 12,
"selectedBackgroundAlpha": 1,
"backgroundAlpha": 1
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"axisColor": "#DADADA",
"minorGridEnabled": true,
"startOnAxis": true,
"gridAlpha": 0.07,
},
"export": {
"enabled": false,
},
"legend": {
"useGraphSettings": true,
},
"listeners": [{
"event": "init",
"method": function(e) {
var date = new Date();
date.setHours(0, 0, 0, 0);
date.setDate(date.getDate() - Math.floor(Math.random() * 20))
e.chart.chartCursor.showCursorAt(date);
}
}]
});
chartWeight.addListener("dataUpdated", function() {
chartWeight.zoomToIndexes(chartWeight.dataProvider.length - 60, chartWeight.dataProvider.length);
});
function getData() {
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 100);
firstDate.setHours(0, 0, 0, 0);
var data = [];
for (var i = 0; i < 120; ++i) {
var newDate = new Date(firstDate);
newDate.setDate(i);
var dataItem = {
"date": newDate,
"kgLeanmass": Math.floor(Math.random() * 20 + 40),
"kgBodyweight": Math.floor(Math.random() * 20 + 60)
};
dataItem.ratioBodyfat = parseFloat((100 * ((dataItem.kgBodyweight - dataItem.kgLeanmass) / dataItem.kgBodyweight)).toFixed(2));
data.push(dataItem);
}
return data;
}
})();
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>

AmCharts Serial Chart: Center-align label under the axis points

In this AmCharts serial chart (Line chart), when the line chart gets rendered, the label in the category axis gets right-aligned from the datapoint intersection.
I need these labels to be center-aligned just below the datapoint intersection scale.
This is the current source code:
chart = AmCharts.makeChart(id, {
"type": "serial",
"autoMarginOffset": 20,
"usePrefixes":true,
"prefixesOfBigNumbers":[
{"number":1e+3,"prefix":"k"},
{"number":1e+6,"prefix":"M"},
{"number":1e+9,"prefix":"G"},
{"number":1e+12,"prefix":"T"},
{"number":1e+15,"prefix":"P"},
{"number":1e+18,"prefix":"E"},
{"number":1e+21,"prefix":"Z"},
{"number":1e+24,"prefix":"Y"}
],
"valueAxes": [{
"id": "v1",
"position": "left",
"ignoreAxisWidth":false
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0,
},
"graphs": [{
"id": "g1",
"fillColors":color,
"lineColor": color,
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"fillColors": color,
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "column-2"
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"valueLineAlpha": 0.5,
"categoryBalloonDateFormat": 'JJ-NN'
},
"categoryField": "column-1",
"categoryAxis": {
"gridPosition": "start",
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": false,
"minPeriod": "mm",
"gridPosition":'middle',
"centerLabels":true,
"equalSpacing":false
},
"dataProvider": dataValue,
"export": {
"enabled": true
},
"allLabels": [{
"text": timeperiod,
"align": "center",
"y":0
}]
});
And this is the rendered graph:
How can this be fixed?

To get the label centered directly under the tick when parsing dates, you have to set equalSpacing to true.
var color = "#112233";
var timeperiod = "test";
var dataValue = generateData();
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"autoMarginOffset": 20,
"usePrefixes":true,
"prefixesOfBigNumbers":[
{"number":1e+3,"prefix":"k"},
{"number":1e+6,"prefix":"M"},
{"number":1e+9,"prefix":"G"},
{"number":1e+12,"prefix":"T"},
{"number":1e+15,"prefix":"P"},
{"number":1e+18,"prefix":"E"},
{"number":1e+21,"prefix":"Z"},
{"number":1e+24,"prefix":"Y"}
],
"valueAxes": [{
"id": "v1",
"position": "left",
"ignoreAxisWidth":false
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0,
},
"graphs": [{
"id": "g1",
"fillColors":color,
"lineColor": color,
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"fillColors": color,
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "column-2"
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"valueLineAlpha": 0.5,
"categoryBalloonDateFormat": 'JJ-NN'
},
"categoryField": "column-1",
"categoryAxis": {
//"gridPosition": "start", does not work with parseDates
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": false,
"minPeriod": "mm",
"gridPosition":'middle',
//"centerLabelOnFullPeriod":false, //alternate solution but won't center directly under the axis tick
"equalSpacing":true
},
"dataProvider": dataValue,
"export": {
"enabled": true
},
"allLabels": [{
"text": timeperiod,
"align": "center",
"y":0
}]
});
function generateData() {
var data = [];
var firstDate = new Date();
firstDate.setHours(0,0,0,0);
for (var i = 0; i < 10; ++i) {
var newDate = new Date(firstDate);
newDate.setMinutes(i);
data.push({
"column-1": newDate,
"column-2": Math.floor(Math.random() * 20 + 1)
});
}
return data;
}
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>
You can also use centerLabelOnFullPeriod if you don't want to use equalSpacing, but it will only position it slightly to the right of the tick but not quite at the center.

Drawing a chart

I would like to draw a chart using this code
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"addClassNames": true,
"theme": "light",
"pathToImages": "/lib/3/images/",
"autoMargins": false,
"marginLeft": 30,
"marginRight": 8,
"marginTop": 10,
"marginBottom": 26,
"dataProvider": [
{
"maand": #Model.Maanden[0],
"neerslag": 33,
"temperatuur": 33
},
{
"maand": "Februari",
"neerslag": 33,
"temperatuur": 33
}
],
"valueAxes": [
{
"axisAlpha": 0,
"position": "left"
}
],
"startDuration": 1,
"graphs": [
{
"alphaField": "alpha",
"balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b> [[additional]]</span>",
"dashLengthField": "dashLengthColumn",
"fillAlphas": 1,
"title": "Gemiddelde neerslag",
"type": "column",
"valueField": "neerslag"
}, {
"id": "graph2",
"balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b> [[additional]]</span>",
"bullet": "round",
"lineThickness": 3,
"bulletSize": 7,
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"useLineColorForBulletBorder": true,
"bulletBorderThickness": 3,
"fillAlphas": 0,
"lineAlpha": 1,
"title": "Gemiddelde temperatuur",
"valueField": "temperatuur"
}
],
"categoryField": "maand",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"tickLength": 0
}
});
</script>
when I use "maand": #Model.Maanden[0] instead of a string it doesn't draw a chart but I know I can access the properties in the model what am I doing wrong?

Try use "maand": '#Model.Maanden[0]' because if you dont put the '' the javascript will understand that the value of the "maand" is #Model.Maanden[0] and not the value of #Model.Maanden[0].