amcharts3 icon indicating copy to clipboard operation
amcharts3 copied to clipboard

Coloring graph labels

Open benwiley4000 opened this issue 6 years ago • 10 comments

For a weird reason that isn't necessarily worth explaining, we'd like to color individual axis labels red in certain cases. This can be accomplished by setting style.fill on the label element to red after the chart render, but it's not clear how best to select individual elements rendered by AMCharts. I know you can set an id on a label using allLabels but I'm not sure that gets me where I need to go. I'm using a labelFunction to dynamically generate the label text. Any pointers?

Thanks!

benwiley4000 avatar Apr 30 '18 19:04 benwiley4000

The best long term solution would be for the labelFunction to optionally return a hash containing label properties instead of only a string.

benwiley4000 avatar Apr 30 '18 20:04 benwiley4000

New comment from Zendesk by Anthony Piris on ticket 33836. (replying here will automatically notify amCharts support agent)

Hi there,

While we don't have any immediate plans to change the labelFunction, we'll keep that suggestion in mind.

If you're using a serial chart, you can change the category axis labels through the labelColorField property if you're not using a date-based axis. We have an example of this here: https://www.amcharts.com/kbase/color-coding-each-category-axis-label-individually/

For value axis labels, your only alternative is to use guides for each label you want to set a color for and set their color property. It's not ideal, but there isn't any other way I'm aware of that can be done through the API directly.

I hope this helps.

Best,

Anthony Piris amCharts

amcharts avatar Apr 30 '18 20:04 amcharts

Thanks so much! This is helpful. Could you elaborate when you say use guides for the value axis labels?

Ben

Le lun. 30 avr. 2018 16 h 39, amcharts [email protected] a écrit :

New comment from Zendesk by Anthony Piris on ticket 33836. (replying here will automatically notify amCharts support agent)

Hi there,

While we don't have any immediate plans to change the labelFunction, we'll keep that suggestion in mind.

If you're using a serial chart, you can change the category axis labels through the labelColorField property if you're not using a date-based axis. We have an example of this here: https://www.amcharts.com/kbase/color-coding-each-category-axis-label-individually/

For value axis labels, your only alternative is to use guides for each label you want to set a color for and set their color property. It's not ideal, but there isn't any other way I'm aware of that can be done through the API directly.

I hope this helps.

Best,

Anthony Piris amCharts

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/amcharts/amcharts3/issues/180#issuecomment-385521560, or mute the thread https://github.com/notifications/unsubscribe-auth/AM7h7Uzuu3enENXTbXdGCEZG3UwBxKO8ks5tt3ZsgaJpZM4TtG2D .

benwiley4000 avatar Apr 30 '18 20:04 benwiley4000

New comment from Zendesk by Anthony Piris on ticket 33836. (replying here will automatically notify amCharts support agent)

Sure - just set a guides array either in a valueAxis object or in the top level of your chart object/config, and set the value, label and color properties like so

  valueAxes: [
    {
      // ...
      guides: [
        {
          value: 10,
          label: "10",
          color: "#ff0000"
        },
        {
          value: 15,
          label: "15",
          color: "#008800"
        },
        {
          value: 20,
          label: "20",
          color: "#0000ff"
        }
      ]
    }
  ],

Here's an example that disables the value axis' labels so that the guide labels stand out better: https://codepen.io/team/amcharts/pen/bc0a90aa5daa62465f45f7431652279c?editors=0010

Let me know if that helps.

Best,

Anthony Piris amCharts

amcharts avatar Apr 30 '18 22:04 amcharts

Thanks! I'll test it out soon. P.S. An update to labelFunction would certainly offer us the most elegant solution - so please do consider it! Thanks again. 🙂

benwiley4000 avatar Apr 30 '18 23:04 benwiley4000

New comment from Zendesk by Anthony Piris on ticket 33836. (replying here will automatically notify amCharts support agent)

You're welcome!

Let me know how it goes.

Best,

Anthony Piris amCharts

amcharts avatar May 01 '18 01:05 amcharts

Would you accept the change to labelFunction as a patch if we forked it ourselves?

benwiley4000 avatar May 02 '18 17:05 benwiley4000

New comment from Zendesk by Anthony Piris on ticket 33836. (replying here will automatically notify amCharts support agent)

Hi Ben,

While we appreciate the offer, I'm afraid we don't accept patches. This github repo is for distribution and logging of issues only. Rest assured that we'll offer a more flexible solution for this in an upcoming release.

Thanks anyway!

Best,

Anthony Piris amCharts

amcharts avatar May 02 '18 17:05 amcharts

Sorry, one other question - can I color the value labels that appear within the chart above specific data points?

benwiley4000 avatar May 03 '18 19:05 benwiley4000

New comment from Zendesk by Anthony Piris on ticket 33836. (replying here will automatically notify amCharts support agent)

Sure. You can set labelColorField in your graph object(s) and specify the desired color in your data for those points.

Demo: https://codepen.io/team/amcharts/pen/0182904a629ca1c1bc41331f9926bfa8?editors=0010

Documentation: http://docs.amcharts.com/3/javascriptcharts/AmGraph#labelColorField

Best,

Anthony Piris amCharts

amcharts avatar May 03 '18 19:05 amcharts