Integrating with chartjs-plugin-datalabels

[bwgjoseph]

Hi,

I was wondering if it is possible to add in fields to the PieOptions if I wanted to use it with chartjs-plugin-datalabels extension.

So with Pie Chart, we can do something like this.

PieChart chart = new PieChart();
chart.setData(new PieData())); // Set some data / dataset
chart.setOptions(new PieOptions()); // Set  `cutoutPercentage` and `rotation`.

So for the PieOptions, you have specified fields that can be set for Pie Chart options which makes the end result in JSON look like... If I were to set in cutoutPercentage and rotation.

options: {
responsive: true,
cutoutPercentage: 10,
rotation: 10
}

So for the chartjs-plugin-datalabels, they have some additional fields that can be set like this example from their page. *This isn't exactly PieChart, but it doesn't really matter what type of chart here.

options: {
    plugins: {
        datalabels: {
            anchor: 'end',
            borderColor: 'white',
            borderRadius: 25,
            borderWidth: 2,
            color: 'white',
            font: {
                weight: 'bold'
            },
        }
    }
}

So if I mix it up, it would become... (I suppose)

options: {
    plugins: {
        datalabels: {
            anchor: 'end',
            borderColor: 'white',
            borderRadius: 25,
            borderWidth: 2,
            color: 'white',
            font: {
                weight: 'bold'
            },
        }
    },
    responsive: true,
    cutoutPercentage: 10,
    rotation: 10
}

Question is, how can I extend the PieOptions to add in new fields that allow me to set in the

plugins: {
        datalabels: {
            anchor: 'end',
            borderColor: 'white',
            borderRadius: 25,
            borderWidth: 2,
            color: 'white',
            font: {
                weight: 'bold'
            },
        }
    },

specified portion of the plugin....

Thanks.. And let me know if there is any other better way to do so.

[davidklebanoff]

@bwgjoseph

I've dealt with this before and cobbled together a quick solution, but there very well may be a better option out there. What you can do is extend PieOptions and add you own attributes - basically extending the original library. The classes are just simple POJOs, so if you add the Jackson annotations to the top of the classes, they'll convert to JSON just fine.

Perhaps one day I'll open source the code so other may use the same technique. It's not foolproof though, if someone wants to use multiple plugins it wouldn't work because it's based on inheritance instead of composition. For a better solution to exist, I think this library would need to change to support plugins. I welcome any thoughts from @mdewilde.

[davidklebanoff]

I've thought about this a little more and I've got an idea that will allow this library to be more compatible with plugins. I'll do a pull request when I get a chance to implement and test it.

[bwgjoseph]

Hi @davidklebanoff,

Thanks for the help.

I did try out extending PieOptions but doesn't seem to work correctly. Probably, I did it wrongly.

I was thinking how can I extend, and also super the PieOptions.

public class ExtraOptions extends PieOptions {
    private String extraLabel;
    private PieOptions pieOptions;

    // setter getter omitted 
}

public class DrawChart {
    PieOptions p = PieOptions.setCutoutPercentage(10).setRotation(10);
    ExtraOptions e = ExtraOptions.setPieOptions(p).setExtraLabel("Test");

    PieChart chart = new PieChart(dataset, e);
}

Is this how it can be done? I believe I was trying this way before, but can't exactly remember where went wrong.

P.S: Saw your pull request, and thanks for that.

[davidklebanoff]

@bwgjoseph

That's essentially what I did. Perhaps you left off some needed Jackson annotations? I'll include some concise code snippets below that should get you going. And like I mentioned in the PR, once the PR is integrated and released I can publish a full extension of the framework to support all datalabels options.

BarOptions.java

@JsonInclude(JsonInclude.Include.NON_EMPTY)
@JsonAutoDetect(fieldVisibility = JsonAutoDetect.Visibility.ANY,
                getterVisibility = JsonAutoDetect.Visibility.NONE,
                setterVisibility = JsonAutoDetect.Visibility.NONE)
public class DatalabelsBarOptions extends BarOptions {

    private Plugins plugins;

    public Plugins getPlugins() {
        return this.plugins;
    }

    public DatalabelsBarOptions setPlugins(final Plugins plugins) {
        this.plugins = plugins;
        return this;
    }

}

Plugins.java

@JsonInclude(JsonInclude.Include.NON_EMPTY)
@JsonAutoDetect(fieldVisibility = JsonAutoDetect.Visibility.ANY,
                getterVisibility = JsonAutoDetect.Visibility.NONE,
                setterVisibility = JsonAutoDetect.Visibility.NONE)
public class Plugins {

    private Datalabels datalabels;

    public Datalabels getDatalabels() {
        return this.datalabels;
    }

    public Plugins setDatalabels(final Datalabels datalabels) {
        this.datalabels = datalabels;
        return this;
    }

}

Datalabels.java

@JsonInclude(JsonInclude.Include.NON_EMPTY)
@JsonAutoDetect(fieldVisibility = JsonAutoDetect.Visibility.ANY,
                getterVisibility = JsonAutoDetect.Visibility.NONE,
                setterVisibility = JsonAutoDetect.Visibility.NONE)
public class Datalabels {

    private Boolean display;

    public Boolean getDisplay() {
        return this.display;
    }

    public Datalabels setDisplay(final Boolean display) {
        this.display = display;
        return this;
    }

}

[bwgjoseph]

Thanks once again, @davidklebanoff

I will try again when I can, and update here when possible.

Hope the pull request can be merge soon.