diff --git a/src/panel/graph_panel/graph_legend.ts b/src/panel/graph_panel/graph_legend.ts
index 1f887da..394c351 100644
--- a/src/panel/graph_panel/graph_legend.ts
+++ b/src/panel/graph_panel/graph_legend.ts
@@ -46,7 +46,7 @@ export class GraphLegend {
       position: 'bottom left',
       targetAttachment: 'top left',
       template:
-        '<series-color-picker series="series" onToggleAxis="toggleAxis" onColorChange="colorSelected"/>',
+        '<series-color-picker-popover series="series" onToggleAxis="toggleAxis" onColorChange="colorSelected"/>',
       openOn: 'hover',
       model: {
         series: series,
diff --git a/src/panel/graph_panel/series_overrides_ctrl.ts b/src/panel/graph_panel/series_overrides_ctrl.ts
index fdf6edb..c5c8f99 100644
--- a/src/panel/graph_panel/series_overrides_ctrl.ts
+++ b/src/panel/graph_panel/series_overrides_ctrl.ts
@@ -54,7 +54,7 @@ export class SeriesOverridesCtrl {
         element: $element.find('.dropdown')[0],
         position: 'top center',
         openOn: 'click',
-        template: '<series-color-picker series="series" onColorChange="colorSelected" />',
+        template: '<series-color-picker-popover series="series" onColorChange="colorSelected" />',
         model: {
           autoClose: true,
           colorSelected: $scope.colorSelected,