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.
I want to change the color of the line graph like they do with nagative values-> https://www.amcharts.com/demos/date-based-line-chart/.
The difference is that i need to change the color when its past an specific guide line, in my case i have four guide line and in the example i just can set one nagativebase and negativeLineColor.
Thanks!!
The link you posted talks about negativeBase, which allows you to set a different baseline value in order to change the line color. You can set that equal to your guide value to achieve the effect you're looking for.
var chart = AmCharts.makeChart( "chartdiv", {
// ...
"valueAxes": [ {
// ...
"guides": [{
"value": 20,
// ...
}],
// ...
} ],
"graphs": [ {
// ...
"negativeLineColor": "#67b7dc",
"negativeBase": 20,
// ...
} ],
// ...
});
Demo
Edit
Multiple negative bases aren't supported out of the box, however you can overlay multiple graphs on top of each other with different negative base values while disabling their balloons and setting their base lineColor to transparent:
"graphs": [{
"balloonText": "<div style='margin:5px; font-size:19px;'><span style='font-size:13px;'>[[category]]</span><br>[[value]]</div>",
"bullet": "round",
"bulletBorderAlpha": 0,
"hideBulletsCount": 50,
"lineThickness": 2,
"negativeLineColor": "#ff0000",
"negativeBase": 20,
"valueField": "visits"
},{
"showBalloon": false,
"bullet": "round",
"bulletBorderAlpha": 0,
"hideBulletsCount": 50,
"lineColor": "transparent",
"negativeLineColor": "#00ff00",
"negativeBase": 10,
"valueField": "visits"
},{
"showBalloon": false,
"lineColor": "transparent",
"bullet": "round",
"bulletBorderAlpha": 0,
"hideBulletsCount": 50,
"negativeLineColor": "#0000ff",
"negativeBase": -10,
"valueField": "visits"
},{
"showBalloon": false,
"bullet": "round",
"bulletBorderAlpha": 0,
"hideBulletsCount": 50,
"lineColor": "transparent",
"negativeLineColor": "#00ffff",
"negativeBase": -20,
"valueField": "visits"
}],
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'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.
I'm trying to find a free charting library for JS that does not require jQuery and is able to add vertical cursor bars at indicated locations. Interactivity would be nice. I only need a line chart, no doughnuts required. Anyone know if this creature exists?
var chartJSON = {
"type": "line",
"background-color": "#fff",
"border-color": "#dae5ec",
"border-width": "1px",
"title": {
"margin-top": "7px",
"margin-left": "12px",
"text": "TODAY'S SALES",
"background-color": "none",
"shadow": 0,
"text-align": "left",
"font-family": "Arial",
"font-size": "11px",
"font-color": "#707d94"
},
"plot": {
"animation": {
"effect": "ANIMATION_SLIDE_LEFT"
}
},
"plotarea": {
"margin": "50px 25px 70px 46px"
},
"scale-y": {
"values": "0:100:25",
"line-color": "none",
"guide": {
"line-style": "solid",
"line-color": "#d2dae2",
"line-width": "1px",
"alpha": 0.5
},
"tick": {
"visible": false
},
"item": {
"font-color": "#8391a5",
"font-family": "Arial",
"font-size": "10px",
"padding-right": "5px"
}
},
"scale-x": {
"line-color": "#d2dae2",
"line-width": "2px",
"values": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
"tick": {
"line-color": "#d2dae2",
"line-width": "1px"
},
"guide": {
"visible": "false"
},
"markers": [{
"type": "area",
"range": [5, 7],
"background-color": "red",
"alpha": 0.3,
"label": {
"text": "Summer Sale",
"alpha": 0.5
}
}],
"item": {
"font-color": "#8391a5",
"font-family": "Arial",
"font-size": "10px",
"padding-top": "5px"
}
},
"legend": {
"layout": "2x2",
"background-color": "none",
"shadow": 0,
"margin": "auto auto 15 auto",
"border-width": 0,
"item": {
"font-color": "#707d94",
"font-family": "Arial",
"padding": "0px",
"margin": "0px",
"font-size": "9px"
},
"marker": {
"show-line": "true",
"type": "match",
"font-family": "Arial",
"font-size": "10px",
"size": 4,
"line-width": 2,
"padding": "3px"
}
},
"crosshair-x": {
"lineWidth": 1,
"line-color": "#707d94",
"plotLabel": {
"shadow": false,
"font-color": "#ffffff",
"font-family": "Arial",
"font-size": "10px",
"padding": "5px 10px",
"border-radius": "5px",
"alpha": 1
},
"scale-label": {
"font-color": "#ffffff",
"background-color": "#707d94",
"font-family": "Arial",
"font-size": "10px",
"padding": "5px 10px",
"border-radius": "5px"
}
},
"tooltip": {
"visible": false
},
"series": [{
"values": [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
"text": "Kenmore",
"line-color": "#4dbac0",
"line-width": "2px",
"shadow": 0,
"marker": {
"background-color": "#fff",
"size": 3,
"border-width": 1,
"border-color": "#36a2a8",
"shadow": 0
},
"palette": 0
}, {
"values": [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
"text": "Craftsman",
"line-width": "2px",
"line-color": "#25a6f7",
"shadow": 0,
"marker": {
"background-color": "#fff",
"size": 3,
"border-width": 1,
"border-color": "#1993e0",
"shadow": 0
},
"palette": 1,
"visible": 1
}, {
"values": [42, 43, 30, 50, 31, 48, 55, 46, 48, 32, 50, 38],
"text": "DieHard",
"line-color": "#ad6bae",
"line-width": "2px",
"shadow": 0,
"marker": {
"background-color": "#fff",
"size": 3,
"border-width": 1,
"border-color": "#975098",
"shadow": 0
},
"palette": 2,
"visible": 1
}, {
"values": [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
"text": "Land's End",
"line-color": "#f3950d",
"line-width": "2px",
"shadow": 0,
"marker": {
"background-color": "#fff",
"size": 3,
"border-width": 1,
"border-color": "#d37e04",
"shadow": 0
},
"palette": 3
}]
}
zingchart.render({
id: "myChart",
height: 300,
width: 500,
data: chartJSON
});
<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="myChart"></div>
Are you referring to something like this? This was done with ZingChart, which is free to use. A marker was set on the x-axis with a range and lowered opacity.
Let me know if you were looking for something else and I'll put together another demo. I'm on the team at ZingChart and happy to help :)
You can do this with amCharts, here is a stacked area chart demo. If you don't need a fill, simply set fillAlphas to 0. and stackType of value axis to "none"
Disclaimer: I am the author of amCharts.
Here is an example made with D3js Framework, it might interest you..