Hello,
I know is possible to have different color for positivie and negative using 1 serie for column.
Would it be possible using 1 serie for many columns?
Cheers!
https://www.amcharts.com/docs/v4/tutorials/different-column-fill-colors-for-positive-and-negative-values/ supports it but Ignition doesn't allow you to use it, as far as I can see.
1 Like
Do you want to apply different color for each column?
I think we can do this:
column.appearance.fill and column.appearance.stroke
1 Like
Go on...
2 Likes
I would use the deriveFieldsFromData within the series column appearance. You'll have to add a new key that contains the color, but this can be computed from the value. Here's a very rough example
View
{
"custom": {
"data": [
{
"x": -33,
"y": 0
},
{
"x": 49,
"y": 1
},
{
"x": 61,
"y": 2
},
{
"x": 8,
"y": 3
},
{
"x": 36,
"y": 4
},
{
"x": -79,
"y": 5
},
{
"x": 76,
"y": 6
},
{
"x": -66,
"y": 7
},
{
"x": -41,
"y": 8
},
{
"x": -71,
"y": 9
},
{
"x": 1,
"y": 10
},
{
"x": -23,
"y": 11
},
{
"x": -16,
"y": 12
},
{
"x": 47,
"y": 13
},
{
"x": -12,
"y": 14
},
{
"x": -64,
"y": 15
},
{
"x": 84,
"y": 16
},
{
"x": 45,
"y": 17
},
{
"x": -59,
"y": 18
},
{
"x": 76,
"y": 19
}
]
},
"params": {},
"propConfig": {
"custom.data": {
"persistent": true
}
},
"props": {},
"root": {
"children": [
{
"meta": {
"name": "XYChart"
},
"position": {
"basis": "375px"
},
"propConfig": {
"props.dataSources.data": {
"binding": {
"config": {
"path": "view.custom.data"
},
"transforms": [
{
"code": "\tdata \u003d []\n\tfor point in value:\n\t\tx\u003dpoint[\u0027x\u0027]\n\t\tcolor \u003d \"#fc0303\" if x\u003c0 else \"#fccf03\"\n\t\tdata.append(\n\t\t{\n\t\t\"x\":x, \n\t\t\"y\":point[\u0027y\u0027],\n\t\t\"color\":color\n\t\t}\n\t\t)\t\n\t\n\treturn data",
"type": "script"
}
],
"type": "property"
}
}
},
"props": {
"dataSources": {},
"series": [
{
"candlestick": {
"appearance": {
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": "",
"min": ""
},
"stacked": false,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
}
},
"high": {
"x": "",
"y": ""
},
"low": {
"x": "",
"y": ""
},
"open": {
"x": "",
"y": ""
}
},
"column": {
"appearance": {
"deriveFieldsFromData": {
"fill": {
"color": "color",
"opacity": ""
},
"stroke": {
"color": "color",
"opacity": "",
"width": ""
}
},
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": "",
"min": ""
},
"height": null,
"stacked": false,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"width": null
},
"open": {
"x": "",
"y": ""
}
},
"data": {
"source": "data",
"x": "x",
"y": "y"
},
"defaultState": {
"visible": true
},
"hiddenInLegend": true,
"label": {
"text": ""
},
"line": {
"appearance": {
"bullets": [
{
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"rotation": "",
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"enabled": false,
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": 100,
"min": 2
},
"height": 10,
"label": {
"position": {
"dx": 0,
"dy": 0
},
"text": "{value}"
},
"render": "circle",
"rotation": 0,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": "{name}: [bold]{valueY}[/]"
},
"width": 10
}
],
"connect": true,
"fill": {
"color": "",
"opacity": 0
},
"minDistance": 0.5,
"stroke": {
"color": "",
"dashArray": "",
"opacity": 1,
"width": 3
},
"tensionX": 1,
"tensionY": 1
},
"open": {
"x": "",
"y": ""
}
},
"name": "data",
"render": "column",
"stepLine": {
"appearance": {
"bullets": [
{
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"rotation": "",
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"enabled": true,
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": 100,
"min": 2
},
"height": 10,
"label": {
"position": {
"dx": 0,
"dy": 0
},
"text": "{value}"
},
"render": "circle",
"rotation": 0,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": "{name}: [bold]{valueY}[/]"
},
"width": 10
}
],
"connect": true,
"fill": {
"color": "",
"opacity": 0
},
"minDistance": 0.5,
"stroke": {
"color": "",
"dashArray": "",
"opacity": 1,
"width": 3
},
"tensionX": 1,
"tensionY": 1
},
"open": {
"x": "",
"y": ""
}
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": "{name}: [bold]{valueY}[/]"
},
"visible": true,
"xAxis": "value",
"yAxis": "category",
"zIndex": 0
}
],
"xAxes": [
{
"appearance": {
"font": {
"size": "",
"weight": 500
},
"grid": {
"color": "",
"dashArray": "",
"minDistance": null,
"opacity": 1,
"position": 0.5
},
"inside": false,
"labels": {
"color": "",
"horizontalCenter": "middle",
"opacity": 1,
"rotation": 0,
"verticalCenter": "middle"
},
"opposite": false
},
"category": {
"break": {
"enabled": false,
"endCategory": "",
"size": 0.05,
"startCategory": ""
}
},
"date": {
"baseInterval": {
"count": 1,
"enabled": false,
"skipEmptyPeriods": false,
"timeUnit": "hour"
},
"break": {
"enabled": false,
"endDate": "",
"size": 0.05,
"startDate": ""
},
"format": "M/d/yyyy HH:mm:ss",
"inputFormat": "yyyy-MM-dd kk:mm:ss",
"range": {
"max": "",
"min": "",
"useStrict": false
}
},
"inversed": false,
"label": {
"color": "",
"enabled": true,
"text": ""
},
"name": "value",
"render": "value",
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": ""
},
"value": {
"break": {
"enabled": false,
"endValue": 100,
"size": 0.05,
"startValue": 0
},
"format": "#,###.##",
"logarithmic": false,
"range": {
"max": "",
"min": "",
"useStrict": false
}
},
"visible": true
}
],
"yAxes": [
{
"appearance": {
"font": {
"size": "",
"weight": 500
},
"grid": {
"color": "",
"dashArray": "",
"minDistance": null,
"opacity": 1,
"position": 0.5
},
"inside": false,
"labels": {
"color": "",
"horizontalCenter": "middle",
"opacity": 1,
"rotation": 0,
"verticalCenter": "middle"
},
"opposite": false
},
"category": {
"break": {
"enabled": false,
"endCategory": "",
"size": 0.05,
"startCategory": ""
}
},
"date": {
"baseInterval": {
"count": 1,
"enabled": false,
"skipEmptyPeriods": false,
"timeUnit": "hour"
},
"break": {
"enabled": false,
"endDate": "",
"size": 0.05,
"startDate": ""
},
"format": "M/d/yyyy HH:mm:ss",
"inputFormat": "yyyy-MM-dd kk:mm:ss",
"range": {
"max": "",
"min": "",
"useStrict": false
}
},
"inversed": false,
"label": {
"color": "",
"enabled": true,
"text": ""
},
"name": "category",
"render": "category",
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": ""
},
"value": {
"break": {
"enabled": false,
"endValue": 100,
"size": 0.05,
"startValue": 0
},
"format": "#,###.##",
"logarithmic": false,
"range": {
"max": "",
"min": "",
"useStrict": false
}
},
"visible": true
}
]
},
"type": "ia.chart.xy"
}
],
"meta": {
"name": "root"
},
"props": {
"direction": "column"
},
"type": "ia.container.flex"
}
}
1 Like