Trying to integrate chartjs-plugin-crosshair #88
Description
I'm trying to integrate the chartjs-plugin-crosshair plugin, but I couldn't make it work.
There is a crosshair plugin already integrated into Charba, but it's not this one, and the other features of chartjs-plugin-crosshair (linked charts specifically) are very important. I'm not sure what I can do to make it work properly?
Here's what I did so far:
- download
chartjs-plugin-crosshair.min.jsand register it as a resource in a GWTClientBundle - enable the plugin with
Injector.ensureInjected(...... .chartjsPluginCrosshair()) - have option classes as follows:
public static class CharbaCrosshairOptions extends AbstractPluginOptions {
private enum Property implements Key {
line,
sync,
zoom;
@Override
public String value() {
return this.toString();
}
}
public CharbaCrosshairOptions() {
super(PLUGIN_NAME, null);
}
public void setLine(LineOptions lineOptions) {
setValue(Property.line, lineOptions);
}
public void setSync(SyncOptions syncOptions) {
setValue(Property.sync, syncOptions);
}
public void setZoom(ZoomOptions zoomOptions) {
setValue(Property.zoom, zoomOptions);
}
}
public final class LineOptions extends NativeObjectContainer {
private enum Property implements Key {
color,
width;
@Override
public String value() {
return this.toString();
}
}
public static LineOptions getDefault() {
LineOptions lineOptions = new LineOptions();
lineOptions.setColor("#F66");
lineOptions.setWidth(1);
return lineOptions;
}
public LineOptions() {
this(null);
}
LineOptions(NativeObject nativeObject) {
super(nativeObject);
}
public void setColor(String color) {
setValue(Property.color, color);
}
public void setWidth(double width) {
setValue(Property.width, width);
}
}
// etc. for SyncOptions and ZoomOptions, according to parameters in the plugin readmeAnd then enable the plugin on the chart with the default options I set up:
CharbaCrosshairOptions crosshairOptions = new CharbaCrosshairOptions();
crosshairOptions.setLine(LineOptions.getDefault());
crosshairOptions.setSync(SyncOptions.getDefault());
crosshairOptions.setZoom(ZoomOptions.getDefault());
crosshairOptions.store(chart);
chartOptions.getPlugins().setEnabled("crosshair", true);But nothing happens. Nothing crashes, but nothing works either. I'm unsure what I'm missing. What's going on?