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
}
});

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.

How can i remove or hide the category name in amchart bar chart

I need to remove the category field from the bar chart.Please suggest me how can i do this.
if i make labels inside false it is coming in left side.i need to remove it completely from the bar.
also check this jsFiddle
https://jsfiddle.net/ArunKumarUmma/21wm5hf5/6/
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": [ {
"Index":"2.45",
"amt":"148,773.88",
"amt1":"60,794.55",
"color":"#ba5bbb",
"color1":"#428DB6",
"name":"Name1",
"value":"148773.88",
"value1":"60794.55"
}, {
"Index":"2.45",
"amt":"148,773.88",
"amt1":"60,794.55",
"color":"#ba5bbb",
"color1":"#428DB6",
"name":"Name2",
"value":"148773.88",
"value1":"60794.55"
}, {
"Index":"2.45",
"amt":"148,773.88",
"amt1":"60,794.55",
"color":"#ba5bbb",
"color1":"#428DB6",
"name":"Name3",
"value":"148773.88",
"value1":"60794.55"
}, {
"Index":"2.45",
"amt":"148,773.88",
"amt1":"60,794.55",
"color":"#ba5bbb",
"color1":"#428DB6",
"name":"Name4",
"value":"148773.88",
"value1":"60794.55"
}, {
"Index":"2.45",
"amt":"148,773.88",
"amt1":"60,794.55",
"color":"#ba5bbb",
"color1":"#428DB6",
"name":"Name5",
"value":"148773.88",
"value1":"60794.55"
}],
"type": "serial",
"theme": "light",
"categoryField": "name",
"rotate": true,
"startDuration": 1,
"startEffect":"easeOutSine",
"columnSpacing": 0,
"autoMargins": false,
"marginBottom": 0,
"pullOutRadius": 0,
"categoryAxis": {
"inside": true,
"gridPosition": "start",
"gridAlpha": 0,
"axisAlpha": 0,
"tickPosition": "start",
"tickLength": 0,
"position": "left"
},
"trendLines": [],
"graphs": [
{
"balloonText": " [[name]]: $[[amt]]<br> Index: [[Index]]",
"fillAlphas": 0.8,
"fillColorsField": "color1",
"id": "AmGraph-12",
"lineAlpha": 0.2,
"title": "amt",
"type": "column",
"valueField": "value",
"showHandOnHover":true,
"labelText": "[[Index]]",
"labelPosition": "right",
"fixedColumnWidth": 15
},
{
"balloonText": " [[name]]: $[[amt1]]",
"fillAlphas": 0.8,
"fillColorsField": "color",
"id": "AmGraph-22",
"lineAlpha": 0.2,
"title": "amt",
"type": "column",
"valueField": "value1",
"showHandOnHover":true,
"fixedColumnWidth": 15
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"axisAlpha": 0,
"gridAlpha": 0,
"labelsEnabled": false,
"minimum":0
}
],
"allLabels": [],
"balloon": {
"fillColor": "#000000",
"color": "#ffffff",
"fillAlpha": 1.0,
"offsetX": 0,
"offsetY": 0,
"horizontalPadding":0,
"maxWidth":100
},
"titles": [],
"export": {
"enabled": true
}
} );
Please check the image what i required exactly

You can hide category axis labels by setting labelsEnabled to false in the categoryAxis object.
To remove the value label on the right side of the bar, remove the labelText definition in your graph object.
Updated fiddle

Just add "hideCredits":true in your code.
It will hide the text "JSCharts by Amcharts".
amcharts:any;
this.amcharts = AmCharts.makeChart("chartdiv", {
"type": "serial", "theme": "none",
"hideCredits":true,
"pathToImages": "/lib/3/images/",
"dataProvider": this.myList,
"valueAxes": [{ "id": "v1", "axisAlpha": 0, "position": "left" }, { "id": "v2", "axisAlpha": 0, "position": "right", "unit": "%", "gridAlpha": 0, "maximum": 100 }],
"startDuration": 1,
"graphs": [{ "fillAlphas": 1, "title": "value", "type": "column", "valueField": "value" }, { "valueAxis": "v2", "bullet": "round", "lineThickness": 3, "bulletSize": 7, "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "useLineColorForBulletBorder": true, "fillAlphas": 0, "lineAlpha": 1, "title": "Value", "valueField": "Value" }],
"categoryField": "name",
"categoryAxis": { "gridPosition": "start", "axisAlpha": 0, "tickLength": 2, "labelRotation": 90}
});

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].