Color picker in React

Hi, I am developing a panel with React for Grafana. I have noticed many different Color picker components in @grafana/ui and am wondering which one is the “correct” one to use and exactly what attributes do I need to assign it there.

Thanks for the answers in advance!

The one named ColorPicker in @grafana/ui

Thanks I managed to implement it. But by the shape and your react graph example I can see that this is meant more or less to be used with your legend. Can it be used in the visual settings tab as well or is it designed specifically for the legend?

Hello Torkel,
I would like to add some question to the correct usage of ColorPicker from @grafana/ui.

I develop currently a Grafana panel plugin on ReactJS.
All is fine, but the ColorPicker within the legend.

I put a legend below the chart and want to popup ColorPicker to change the color of the series plot. How Do I manage this?

Here the code …

But this is rendered as follows …

The text is displayed but nothing related to the ColorPicker.

I really appreciate any help with respect to that topic. It is the last step to finalize the plugin.


This is how the graph looks currently,

@mihoci10 could you give me hint, how you implemented ColorPicker to change series color within the legend? Could you share some code snippit?