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.
Related
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
}
});
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.
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 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.
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].