Custom column colors for each category with JSON data

Resolved

(@wbfz)

Hello,

Whats the amcharts4 config for setting specific colors to columns by category when loading data with json?
amCharts3 had a graphs config like below to add colors to a specific category.

graphs": [{
        "balloonText": "<b>title</b><br><span style='font-size:14px'>category: <b>value</b></span>",
        "fillAlphas": 0.8,
        "labelText": "value",
        "lineAlpha": 0.3,
        "title": "Green",
        "type": "column",
		"color": "#000000",
      	"fillColors": "#009925",
        "valueField": "Green"
    }, {
        "balloonText": "<b>title</b><br><span style='font-size:14px'>category: <b>value</b></span>",
        "fillAlphas": 0.8,
        "labelText": "value",
        "lineAlpha": 0.3,
        "title": "Red",
        "type": "column",
		"color": "#000000",
      	"fillColors": "#d21502",
        "valueField": "Red"
    }

Viewing 9 replies - 1 through 9 (of 9 total)

Plugin Author martynasma
(@martynasma)

3 years ago

You can use propertyFields on series for that in amCharts 4:

https://www.amcharts.com/docs/v4/concepts/data/#Property_fields

Thread Starter wbfz
(@wbfz)

3 years ago

Thanks @martynasma

I went through the link before posting here. The examples there were based on a color field existing in the json data that the propertyField can map to.

I don’t have an existing color field in the data and my json data is externally loaded as described here – https://www.amcharts.com/docs/v4/concepts/data/loading-external-data/#JSON

Is there an example on how to use the propertyFields based a specific field name and add a custom color to it?

Thanks
Thread Starter wbfz
(@wbfz)

3 years ago
Trying out the Adapters config but not getting the exact solution.

Tried out the configs below but none gave the expected outcome. It applied the default color to all the columns in both cases.
```
series.columns.template.adapter.add("fill", function(fill, target) {
  //switch (target.dataItem.name) {
  switch (target.dataItem.category) {
    case "Excellent":
      return am4core.color("#F9F871");
    case "Good":
      return am4core.color("#845EC2");
    case "Neutral":
      return am4core.color("#D65DB1");
    case "Bad":
      return am4core.color("#D65DB1");
    default:
      return am4core.color("#FF3D00");
  }
```
and
```
series.columns.template.column.adapter.add("fill", function(fill, target) {
  if (target.dataItem) {
    if (target.dataItem.category == "Excellent") {
      return am4core.color("#F9F871");
    } else if (target.dataItem.category == "Good") {
      return am4core.color("#845EC2);
    } else if (target.dataItem.category == "Neutral") {
      return am4core.color("#D65DB1");
    } else {
      return am4core.color("#000000");
    }
  }
  return fill;
});
```
Plugin Author martynasma
(@martynasma)

3 years ago
E.g.:
```
series.columns.template.propertyFields.fill = "color"
```
Thread Starter wbfz
(@wbfz)

3 years ago

Thanks @martynasma

I am aware of this snippet but it is based on having a color field in the json data.

There is no color field in my json data that’s why i asked if another category field can be used as the condition to apply custom colors e.g if the category name is Red then column color will be red.

Most sql tables don’t store color codes as part of the data.

Regards

Plugin Author martynasma
(@martynasma)

3 years ago

Well then adapter approach you have above is the way to go, except you may be need to refer to the category better, e.g. target.dataItem.categoryX

Thread Starter wbfz
(@wbfz)

3 years ago

Thanks. Will try it out.

Thread Starter wbfz
(@wbfz)

3 years ago

Thanks. Its working now. Added the CategoryX

Thread Starter wbfz
(@wbfz)

3 years ago

✅

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Custom column colors for each category with JSON data’ is closed to new replies.