I am trying to get a line graph to display correctly on my site, but for some reason it wants to overflow the graph container. I have tried reset the box-sizing to initial, setting overflow hidden on all child elements of the graph and nothing seems to be working. I have no idea why this is happening and was wondering if anyone had come across this issue before themselves?
I've added an image below of what I am currently getting and underneath that, the object that is being used to set up the line graph.
{
"type": "serial",
"theme": "light",
"marginRight": 80,
"autoMarginOffset": 20,
"marginTop": 7,
"dataProvider": queryData.data.result,
"valueAxes": [{
"axisAlpha": 0.2,
"dashLength": 1,
"position": "left"
}],
"mouseWheelZoomEnabled": true,
"graphs": [{
"id": "g1",
"balloonText": "[[value]]",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"hideBulletsCount": 50,
"title": "red line",
"valueField": "value",
"useLineColorForBulletBorder": true,
"balloon": {
"drop": true
}
}],
"chartScrollbar": {
"autoGridCount": true,
"graph": "g1",
"scrollbarHeight": 40
},
"chartCursor": {
"limitToGraph": "g1"
},
"categoryField": "name",
"dataDateFormat": "DD/MM/YYYY HH:NN:SS",
"categoryAxis": {
"parseDates": true,
"axisColor": "#DADADA",
"dashLength": 1,
"minorGridEnabled": true
},
"export": {
"enabled": true
}
}
This might be happening if you are using <base href> directive on your web page. In those cases references to masking filters in SVG do not work properly, hence lines protruding from plot area.
To avoid that simply add the global baseHref setting line to your code:
AmCharts.baseHref = true;
Please note that this must be a standalone line (not a part of chart config) and go before any of the code that creates charts.
Related
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.
Im not getting x axis value (time) on tooltip as ballon text
on mouse hover in Amchart horizon chart with multiple panels.
I need x axis time on tool tip on mouse over. Please find more on: https://www.amcharts.com/demos/multi-panel-horizon-chart/
function buildPanel(dim) {
return {
"valueAxes": [{
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left",
"gridCount": 2,
"labelsEnabled": false,
"labelFrequency": 1,
"strictMinMax": true,
"minimum": 0,
"maximum": 2
}, {
"id": "actual",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left",
"gridCount": 2,
"labelsEnabled": false
}],
"showCategoryAxis": true,
"stockGraphs": [{
"id": "pos_band1" + dim,
"lineAlpha": 0,
"showBalloon": false,
"valueField": "pos_1d",
"fillAlphas": 0,
"useDataSetColors": false,
"visibleInLegend": false,
"balloonText" :"Test Vale" // show Ballon Text
}, {
"fillAlphas": 1,
"lineColor": "#c6dbef",
"fillToGraph": "pos_band1" + dim,
"lineAlpha": 0,
"showBalloon": false,
"valueField": "pos_1u" + dim,
"type": "step",
"theme": "light",
"useDataSetColors": false,
"visibleInLegend": false
}, {
"id": "pos_band2" + dim,
"lineAlpha": 0,
"showBalloon": false,
"valueField": "pos_2d",
"fillAlphas": 0,
"useDataSetColors": false,
"visibleInLegend": false
}]
};
}
Can anyone please help me.
In your particular snippet you have to set showBalloon to true, but you might get the raw band value rather than the final value if you replace your balloonText to [[value]] will show you the balloon of the raw band value rather than the final value, which might not be what you want. Also note that [[category]] will get you the date/time.
If you want to modify the balloons in the demo you linked, you have to modify the balloonText as mentioned or create a balloonFunction if you want to fine-tune the date formatting using AmCharts.formatDate in the last two stockGraphs:
function buildPanel(dim) {
return {
// ..
stockGraphs: [
// bands omitted
{
"fillAlphas": 0,
"lineAlpha": 0,
"lineColor": "#eee",
"showBalloonAt": "open",
"balloonFunction": function(graphDataItem) {
return graphDataItem.values.value + "<br>" +
AmCharts.formatDate(graphDataItem.category, "YYYY-MM-DD JJ:NN:SS");
},
"valueField": "val" + dim,
"openField": "mid",
"type": "smoothedLine",
"useDataSetColors": false,
"visibleInLegend": false
}, {
"lineAlpha": 1,
"lineColor": "#2171b5",
"lineThickness": 2,
//"showBalloonAt": "open", //remove from actual graph as it does not have an open value
"balloonFunction": function(graphDataItem) {
return graphDataItem.values.value + "<br>" +
AmCharts.formatDate(graphDataItem.category, "YYYY-MM-DD JJ:NN:SS");
},
"valueField": "actual" + dim,
"type": "smoothedLine",
"useDataSetColors": false,
"visibleInLegend": false,
"valueAxis": "actual"
} ]
}
}
Here's a demo
I have to change label text to green and red color.how can we change the color of a label using java script amcharts. and is it possible to add a up arrow after the label text.Please check the code below.
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": [],
"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 Suggest me How can i achieve this.Also check this JsFiddle
https://jsfiddle.net/ArunKumarUmma/21wm5hf5/6/
You can set the label color using the color property in the graph object:
"graphs": [{
// ...
"color": "#008000",
"labelText": "[[Index]]"
},
color demo
If you need to specify it for each individual column, then you have to set the color in your data and use labelColorField to access it. If you have a color property set, it will fall back to that color if a particular data element does not have an associated labelColorField property.
"dataProvider": [{
// ...
"labelColor": "#880000",
"name": "Name1",
"value": "148773.88",
"value1": "60794.55"
}, // ...
]
"graphs": [{
// ...
"color": "#008000",
"labelColorField": "labelColor",
"labelText": "[[Index]]"
},
labelColorField demo.
Edit again
You can add arrows by inserting the unicode escape string. For example, the up arrow is \u02191 and down arrow is \u02193.
For example:
"labelText": "[[value]] \u02191",
Updated fiddle
If you need to do this dynamically, you'll need to set a labelFunction and figure out a way to determine which arrow to use. Check its documentation and figure out the best way to use it for your setup.
I wish that the documentation was more clear, but you can change the label colour with nested properties so:
chart.labels.template.fill = am4core.color("white");
This would target your labels and change their colour.
I needed my font color to be dark since my charts bg color was white:
xAxis.renderer.labels.template.fill = am4core.color('#000000');
yAxis.renderer.labels.template.fill = am4core.color('#000000');
i have some troubles with displaying data via amcharts when "minPeriod" property is equal to "WW".
My codepen examples:
var data = [];
var date = new Date();
for (var i = 0; i< 10;i++){
data.push({
calcDate: moment(new Date()).startOf('day').add(i, 'days').toDate(),
value: Math.random(100)});}
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"startDuration": 0,
"categoryField": "calcDate",
"theme": "light",
"marginRight": 70,
"autoMarginOffset": 20,
"dataProvider": data,
"graphs": [{
"type": "column",
"fillAlphas": 1,
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]] C</span></b>",
"lineColor": "#b6d278",
"valueField": "value"
}],
"chartCursor": {
"cursorAlpha": 0.1,
"cursorColor": "#000000",
},
"categoryAxis": {
"minPeriod": "DD",
"parseDates": true,
"minorGridEnabled": true
},
"export": {
"enabled": true
}});
Days example (how it must look)
var data = [];
var date = new Date();
for (var i = 0; i< 10;i++){
data.push({
calcDate: moment(new Date()).startOf('day').add(7*i, 'days').toDate(),
value: Math.random(100)});}
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"startDuration": 0,
"categoryField": "calcDate",
"theme": "light",
"marginRight": 70,
"autoMarginOffset": 20,
"dataProvider": data,
"graphs": [{
"type": "column",
"fillAlphas": 1,
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]] C</span></b>",
"lineColor": "#b6d278",
"valueField": "value"
}],
"chartCursor": {
"cursorAlpha": 0.1,
"cursorColor": "#000000",
},
"categoryAxis": {
"minPeriod": "WW",
"parseDates": true,
"minorGridEnabled": true
},
"export": {
"enabled": true
}
});
Week example (broken).
As you can see, all the last link's labels are aligned to the left and it makes my chart pretty ugly. I think it's happening because of the disconnecting between real values and expected by categoryAxis. Maybe there's a property to fix it, but i could'n find it.
If you've faced the same problem and have some advices to me, please help.
You can set centerLabels to true in your categoryAxis to force the labels to be centered.
Updated codepen
I'm trying to add a class name to a custom bullet, so I can position it with CSS. I'm also trying to add a value to that custom bullet. I don't think I have it set right in the gauge js:
var chart = AmCharts.makeChart("maint-good", {
"type": "serial",
"rotate": true,
"theme": "light",
"path": "http://www.amcharts.com/lib/3/",
"autoMargins": false,
"marginTop": 80,
"marginLeft": 80,
"marginBottom": 30,
"marginRight": 50,
"addClassNames": true,
"dataProvider": [{
"marginTop": 80,
"category": "",
"excelent": 20,
"good": 20,
"average": 20,
"poor": 20,
"bad": 20,
"limit": 15,
"full": 15,
"bullet": 15,
"icon": "assets/img/icons/maint_good.svg",
"ok": "assets/img/icons/ok.svg"
}],
"valueAxes": [{
"maximum": 20,
"stackType": "regular",
"gridAlpha": 0
}],
"startDuration": 1,
"graphs": [{
"columnWidth": 0.6,
"lineColor": "#2F2F2F",
"lineThickness": 22,
"noStepRisers": true,
"stackable": false,
"type": "step",
"valueField": "limit",
"bulletSize": 95,
"customBulletField": "icon"
}, {
"valueField": "full",
"showBalloon": false,
"type": "column",
"lineAlpha": 0,
"fillAlphas": 0.8,
"fillColors": ["#2F2F2F", "#2F2F2F", "#2F2F2F"],
"gradientOrientation": "horizontal"
}, {
"clustered": false,
"columnWidth": 0.3,
"fillAlphas": 1,
"lineColor": "#8dc53e",
"stackable": false,
"type": "column",
"valueField": "bullet",
"customBulletField": "ok",
"bulletSize": 95,
}],
"columnWidth": 1,
"categoryField": "category",
"categoryAxis": {
"gridAlpha": 0,
"position": "left",
"display": "none"
}
});
The two bullets I'm trying to add a class to are "icon" and "ok". I know there is documentation in amCharts for this, but it does not give any examples. Could someone provide me with an example?
You can use graph's property classNameField to specify which field in data holds a custom class name to be applied for the specific data point.
I.e.:
"graphs": [{
// ... other graph settings
"customBulletField": "icon",
"classNameField": "iconClass"
}, ...
In data:
"dataProvider": [{
// ...
"icon": "assets/img/icons/maint_good.svg",
"iconClass": "icon",
// ...
}]
Now, the chart will apply both the hardcoded class name "amcharts-graph-bullet" and custom class name, such as "icon":
Now you can target this specific bullet using CSS:
.amcharts-graph-bullet.icon image {
/* your css here */
}
Please note, that in order for the above to work, the addClassNames setting needs to be enabled. You already have that set in your code, just though it's worth mentioning for anyone else, looking for similar solution.