I have problem with displaying balloonText after tap on column in AmChart chart inserted into ion-scroll component.
balloonText is displayed correctly only for values which are visible by default, but columns which are displayed after scroll event (scroll to right) are not displaying values above the column which is tapped but value is displayed still on beginning of the chart (it means on wrong columns).
I would like to ask, how can i solve this issue or which one another component i shoul to use instead of the ion-scroll.
Here is the code of the template and chart.
Many thanks for any advice
Chart view:
<!--hourly charts-->
<ion-scroll
id="scroll_hourly"
style="width:200%;"
class="vh72"
direction="x">
<div id="chartdiv_hourly" class="vh72" style="width:200%;">
</div>
Chart generating:
chart = AmCharts.makeChart("chartdiv_hourly", {
"type": "serial",
"theme": "light",
"pathToImages": "/lib/3/images/",
"autoMargins": false,
"marginLeft":25,
"marginRight":0,
"sequencedAnimation":false,
"animationDuration":0.1,
"columnSpacing":0,
"marginTop":10,
"marginBottom":30,
"panEventsEnabled":true,
// "titles": [
// {
// "text": "Chart Title",
// "size": 15
// }
// ],
"legend": {
"equalWidths": false,
//"periodValueText": "total: [[value.sum]]",
"valueAlign": "center",
"labelWidth": 50,
//"valueWidth": 200,
"width": 400,
"align": "center",
// low spacing can help to insert legent into one line
"spacing": 1
},
"dataProvider": chartData2,
"valueAxes": [{
"axisAlpha": 0,
"position": "left"
//"gridColor": "#ffffff"
}],
"startDuration": 1,
"graphs": [{
"id":"g1",
"alphaField": "alpha",
"balloonText": "<span style='font-size:13px;'><b>[[title]]</b> in [[category]]:<b>[[value]]</b> [[additional]]</span>",
"dashLengthField": "dashLengthColumn",
"fillAlphas": 1,
"color":"#5b9bd5",
"legendColor":"#5b9bd5",
"fillColors":"#5b9bd5",
"title": "Dials",
"type": "column",
"valueField": "DIALS_CNT"
},
{
"alphaField": "alpha",
"balloonText": "<span style='font-size:13px;'><b>[[title]]</b> in [[category]]:<b>[[value]]</b> [[additional]]</span>",
"dashLengthField": "dashLengthColumn",
"fillAlphas": 1,
"fillColors":"#70ad47",
"lineColor":"transparent",
"legendColor":"#70ad47",
"title": "Conv",
"type": "column",
"valueField": "CONVERS_CNT"
},
{
"balloonText": "<span style='font-size:13px;'><b>[[title]]</b> in [[category]]:<b>[[value]]</b> [[additional]]</span>",
"bullet": "round",
"dashLengthField": "dashLengthLine",
"lineThickness": 4,
"bulletSize": 10,
"bulletBorderAlpha": 1,
"bulletColor": "#fb6705",
"lineColor":"#fb6705",
"legendColor":"#fb6705",
"useLineColorForBulletBorder": true,
"bulletBorderThickness": 3,
"fillAlphas": 0,
"lineAlpha": 1,
"title": "Appt",
"valueField": "APPT_CNT"
}],
"categoryField": "DATE",
"categoryAxis": {
"gridPosition": "start",
"autoRotateAngle": 20,
//"gridPosition":"start",
//"minHorizontalGap": 20,
//"minVerticalGap": 50,
//"autoWrap": true,
"gridColor": "#ffffff",
"position": "bottom",
"fontSize": 8,
"labelRotation": 30,
"axisAlpha":0,
"tickLength":0
}
/*
"chartScrollbar": {
"autoGridCount": true,
"graph": "g1",
"scrollbarHeight": 40
},
*/
});
// HIDE LOADING MESSAGE
$ionicLoading.hide();
};