Menu

Set dataLabel color same as bar color

2013-08-15
2013-08-19
  • Gustavo Matias

    Gustavo Matias - 2013-08-15

    Hi, I would like to know how to make the dataLabel color the same as the its bar, I only found a way to set a color that will be applied for both.

    I also tried to adding some logic in the DataLabelsFormatter but it doesn't work.

    first attempt:

        chart.setType(Series.Type.COLUMN)
                    .setColumnPlotOptions(new ColumnPlotOptions()
                        .setDataLabels(new DataLabels()
                            .setEnabled(true)
                            .setFormatter(new DataLabelsFormatter() {
                                @Override
                                public String format(DataLabelsData pDataLabelsData) {
                                    if (pDataLabelsData.getSeriesName().equalsIgnoreCase("school"))
                                        pDataLabelsData.getPoint().setColor("#5E2750");
                                    else if (pDataLabelsData.getSeriesName().equalsIgnoreCase("network"))
                                        pDataLabelsData.getPoint().setColor("#D95E00");
                                    return pDataLabelsData.getYAsLong() + "%";
                                }
                            })
                        )
                    );
    

    second attempt:

    chart.addSeries(chart.createSeries().setName("School").setPoints(data.toArray(new Number[data.size()])).setPlotOptions(new ColumnPlotOptions().setColor("#D95E00")));
    chart.addSeries(chart.createSeries().setName("Network").setPoints(data.toArray(new Number[data.size()])).setPlotOptions(new ColumnPlotOptions().setColor("#5E2750")));
    

    none of them worked...

    here's an example in JS of what I'm trying to accomplish: http://jsfiddle.net/Pujrw/

     

    Last edit: Gustavo Matias 2013-08-15
  • Cory Skowronek

    Cory Skowronek - 2013-08-19

    The DataLabels object itself has a setColor method which can be used to set a custom color instead of using the default. I tested it using the code from Basic Column Example from the Showcase Application.

    
    chart.addSeries(chart.createSeries()
        .setName("Tokyo")
        .setPoints(new Number[] { 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 })
        .setPlotOptions(
            new ColumnPlotOptions()
                .setDataLabels(
                    new DataLabels()
                        .setColor("#2f7ed8")
                        .setEnabled(true)
                        .setFormatter(new DataLabelsFormatter() {
                            public String format(DataLabelsData dataLabelsData) {
                                return dataLabelsData.getYAsLong() + " mm";
                            }
                        })
                )
        )
    );
    

    The color "#2f7ed8" came from the list of default colors that Highcharts uses. Since I was applying it to the first series, I was able to set the color of the DataLabels to use the first color from the list. (Here)[http://api.highcharts.com/highcharts#colors] are the default colors that I am referring to.

    If you are using custom colors for your columns, you should be able to use it similarly by setting the color of the DataLabels to the same color you are using for the columns.

     

Log in to post a comment.

Want the latest updates on software, tech news, and AI?
Get latest updates about software, tech news, and AI from SourceForge directly in your inbox once a month.