[#805][3.0] Bar Chart 그라데이션 값 rgba 지원

- 사용자가 입력한 색상값(hex, rgb, rgba) 을 rgba로 변환하는 util 메소드 추가 - 사용자가 입력한 색상값이 rgba일 경우, opacity값을 추출하는 util 메소드 추가 - 그라데이션 생성로직을 비롯하여 series 그리는 부분의 fill style 로직 모두 앞서 추가한 util을 호출하는 로직으로 변경 - Barchart > Gradient 예제 코드 수정 - 관련 md 파일 수정
ex-em · May 3, 2021 · 7f15f02 · 7f15f02
1 parent f112c17
commit 7f15f02
Show file tree

Hide file tree

Showing 13 changed files with 135 additions and 79 deletions.
diff --git a/docs/views/barChart/api/barChart.md b/docs/views/barChart/api/barChart.md
@@ -23,17 +23,18 @@
   |------------ |-----------|---------|-------------------------|---------------------------------------------------|
   | name | String | series-${index} | 특정 데이터에 대한 시리즈 옵션 |  |
   | type | String | 'bar' | 시리즈에 해당하는 데이터 표현 방식 | 'bar', 'pie', 'line', 'scatter' |
-  | color | String or Object | COLOR[index] | 특정 색상을 지정하지 않으면 사전에 정의된 16개 색상('#2b99f0' ~ '#df6264)을 순차적으로 적용 |  |
+  | color | Hex, RGB, RGBA Code(String) or Object | COLOR[index] | 특정 색상을 지정하지 않으면 사전에 정의된 16개 색상('#2b99f0' ~ '#df6264)을 순차적으로 적용 |  |
   | showValue | Object | ([상세](#showvalue)) | 막대 위에 값 표시 여부 및 속성 |  |
 
 #### color Example
 ```
 const chartData = {
     series: {
       series1: { name: 'series#1' }, // 기본 색상으로 자동 할당
-      series2: { name: 'series#2', color: '#FF00FF' }, // 특정 색상 지정
-      series3: { name: 'series#3', color: [[0, '#FBC2EB'], [1, '#A6C1EE']] }, // 특정 색상으로 그라데이션
-      series4: { name: 'series#3', color: [[], [1, '#ED9B57']] }, // 투명하게 시작하여 특정 색상으로 그라데이션
+      series2: { name: 'series#2', color: '#FF00FF' }, // 특정 색상 지정 (hex)
+      series3: { name: 'series#2', color: 'rgba(255, 165, 0, 1)' }, // 특정 색상 지정 (rgb)
+      series4: { name: 'series#3', color: [[0, 'rgba(255, 165, 0, 0.4)'], [1, '#A6C1EE']] }, // 특정 색상으로 그라데이션
+      series5: { name: 'series#3', color: [[], [1, 'rgba(255, 165, 0, 1)']] }, // 투명하게 시작하여 특정 색상으로 그라데이션
     },
     ... 생략
 }
@@ -43,7 +44,7 @@ const chartData = {
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 | --- | ---- | ----- | --- | ----------|
 | use | Boolean | false | data label 표시 여부 | true /false |
-| fontColor | HexCode(String) | '#000000' | 글자 색상  | |
+| fontColor | Hex, RGB, RGBA Code(String) | '#000000' | 글자 색상  | |
 | fontSize | Number | 12 | 글자 크기 | |
 | align | String | 'end' | tooltip 테두리 색상  | 'start', 'center', 'end', 'out' |
 
@@ -128,7 +129,7 @@ const chartData = {
 | 이름 | 타입 | 디폴트 | 설명 |
 |-----|------|-------|-----|
 | fontSize | Number | 12 | 글자 크기 |
-| color | HexCode (String) | '#25262E' | 글자 색상 |
+| color | Hex, RGB, RGBA Code(String) | '#25262E' | 글자 색상 |
 | fontFamily | String | 'Roboto' | 폰트 | 
 | fitWidth | Boolean | false | Label Text Ellipsis 처리 |
 | fitDir | String | 'right' | Ellipsis 방향 |
@@ -141,25 +142,25 @@ const chartData = {
 | text | String | '' | 타이틀 | | 
 | style | Object | | 타이틀 폰트 스타일 | | 
 | style.fontSize | Number | 15 | 글자 크기 | | 
-| style.color | HexCode(String) | '#000' | 글자 색상 | | 
+| style.color | Hex, RGB, RGBA Code(String) | '#000' | 글자 색상 | | 
 | style.fontFamily | String | 'Roboto' | 글자체 | |  
 
 #### legend
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 | --- | ---- | ----- | --- | ----------|
 | show | Boolean | false | Legend 표시 여부 | true /false |
 | position | String | 'right' | Legend 위치 | 'top', 'right', 'bottom', 'left' |
-| color | HexCode(String) | '#353740' | 폰트 색상 | | 
-| inactive | HexCode(String) | '#aaa' | 비활성화 상태의 폰트 색상 | | 
+| color | Hex, RGB, RGBA Code(String) | '#353740' | 폰트 색상 | | 
+| inactive | Hex, RGB, RGBA Code(String) | '#aaa' | 비활성화 상태의 폰트 색상 | | 
 | width | Number | 140 | Legend의 넓이 *('left', 'right'의 경우 조절)* | | 
 | height | Number | 24 | Legend의 높이 *('top', 'bottom'의 경우 조절)* | | 
 
 #### tooltip
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 | --- | ---- | ----- | --- | ----------|
 | use | Boolean | true | tooltip 표시 여부 | true /false |
-| backgroundColor | HexCode(String) | '#4C4C4C' | tooltip 배경 색상  | |
-| borderColor | HexCode(String) | '#666666' | tooltip 테두리 색상  | |
+| backgroundColor | Hex, RGB, RGBA Code(String) | '#4C4C4C' | tooltip 배경 색상  | |
+| borderColor | Hex, RGB, RGBA Code(String) | '#666666' | tooltip 테두리 색상  | |
 | useShadow | Boolean | false | 그림자 사용 여부  | |
 | shadowOpacity | Number | 0.25 | 그림자 투명도  | |
 | throttledMove | Boolean | false | 데이터 조회 Throttling 처리 유무  | |
@@ -185,9 +186,9 @@ const chartData = {
 | use | Boolean | true | maxTip 표시 여부  | |
 | fixedPosTop | Boolean | false | maxTip 위치를 최대값으로 고정  | |
 | showIndicator | Boolean | false | indicator 표시 여부  | |
-| indicatorColor | HexCode(String) | '#000000' | indicator 색상  | |
-| tipBackground | HexCode(String) | '#000000' | maxTip 배경색상  | |
-| tipTextColor | HexCode(String) | '#FFFFFF' | maxTip 글자 색상  | |
+| indicatorColor | Hex, RGB, RGBA Code(String) | '#000000' | indicator 색상  | |
+| tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | maxTip 배경색상  | |
+| tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | maxTip 글자 색상  | |
 
 #### selectItem
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
@@ -198,9 +199,9 @@ const chartData = {
 | showIndicator | Boolean | false | 선택한 label의 indicator 표시  | |
 | fixedPosTop | Boolean | false | indicator 및 tip의 위치를 최대값으로 고정  | |
 | useApproximateValue | Boolean | false | 가까운 label을 선택  | |
-| indicatorColor | HexCode(String) | '#000000' | indicator 색상  | |
-| tipBackground | HexCode(String) | '#000000' | tip 배경색상  | |
-| tipTextColor | HexCode(String) | '#FFFFFF' | tip 글자 색상  | |
+| indicatorColor | Hex, RGB, RGBA Code(String)| '#000000' | indicator 색상  | |
+| tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | tip 배경색상  | |
+| tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | tip 글자 색상  | |
 
 >### Event
 | 이름 | 파라미터 | 설명 |

diff --git a/docs/views/barChart/example/Gradient.vue b/docs/views/barChart/example/Gradient.vue
@@ -12,8 +12,8 @@
         series: {
           series1: { name: 'series#1' }, // 기본 색상
           series2: { name: 'series#2', color: '#FF00FF' }, // 특정 색상
-          series3: { name: 'series#3', color: [[0, '#FBC2EB'], [1, '#A6C1EE']] }, // 특정 색상으로 그라데이션
-          series4: { name: 'series#3', color: [[], [1, '#ED9B57']] }, // 투명하게 시작하여 특정 색상으로 그라데이션
+          series3: { name: 'series#3', color: [[0, '#FF6767'], [0.5, '#FFD1B9'], [1, '#FF9A67']] }, // 특정 색상으로 그라데이션
+          series4: { name: 'series#4', color: [[], [1, 'rgba(255, 239, 35, 0.5)']] }, // 투명하게 시작하여 특정 색상으로 그라데이션
         },
         labels: ['value1', 'value2', 'value3', 'value5', 'value5'],
         data: {

diff --git a/docs/views/lineChart/api/lineChart.md b/docs/views/lineChart/api/lineChart.md
@@ -23,17 +23,19 @@
   |------------ |-----------|---------|-------------------------|---------------------------------------------------|
   | name | String | series-${index} | 특정 데이터에 대한 시리즈 옵션 |  |
   | type | String | 'bar' | 시리즈에 해당하는 데이터 표현 방식 | 'bar', 'pie', 'line', 'scatter' |
-  | color | String | COLOR[index] | 사전에 정의된 16개 색상('#2b99f0' ~ '#df6264)을 순차적으로 적용 |  |
   | point | Boolean | true | 선(line) 위에 값 위치 마다 점을 표시할지의 여부 |  |
   | fill | Boolean | false | 선(line) 아래 부분의 영역에 색상을 채울지의 여부. area chart 전환 여부 |  |
+  | color | Hex, RGB, RGBA Code(String) | COLOR[index] | Line 색상. 사전에 정의된 16개 색상('#2b99f0' ~ '#df6264)을 순차적으로 적용 |  |
+  | pointFill | Hex, RGB, RGBA Code(String) | COLOR[index] | Point 색상. 사전에 정의된 16개 색상('#2b99f0' ~ '#df6264)을 순차적으로 적용 |  |
+  | fillColor | Hex, RGB, RGBA Code(String) | COLOR[index] | Fill 색상. 사전에 정의된 16개 색상('#2b99f0' ~ '#df6264)을 순차적으로 적용 |  |
 
 #### data example
 ```
 const time = dayjs().format('YYYY-MM-DD HH:mm:ss');
 const chartData = 
   series: {
-    series1: { name: 'series1', point: false, fill: true },
-    series2: { name: 'series2', point: true, fill: false },
+    series1: { name: 'series1', point: false, fill: true, color: '#FF00Ff', fillColor: '#FF0000' },
+    series2: { name: 'series2', point: true, fill: false, pointFill: '#FF0000' },
   },
   data: {
     series1: [1, 2, 3, 4],
@@ -90,7 +92,7 @@ const chartData =
 | 이름 | 타입 | 디폴트 | 설명 |
 |-----|------|-------|-----|
 | fontSize | Number | 12 | 글자 크기 |
-| color | HexCode (String) | '#25262E' | 글자 색상 |
+| color | Hex, RGB, RGBA Code(String) | '#25262E' | 글자 색상 |
 | fontFamily | String | 'Roboto' | 폰트 | 
 | fitWidth | Boolean | false | Label Text Ellipsis 처리 |
 | fitDir | String | 'right' | Ellipsis 방향 |
@@ -103,25 +105,25 @@ const chartData =
 | text | String | '' | 타이틀 | | 
 | style | Object | | 타이틀 폰트 스타일 | | 
 | style.fontSize | Number | 15 | 글자 크기 | | 
-| style.color | HexCode(String) | '#000' | 글자 색상 | | 
+| style.color | Hex, RGB, RGBA Code(String) | '#000' | 글자 색상 | | 
 | style.fontFamily | String | 'Roboto' | 글자체 | |  
 
 #### legend
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 | --- | ---- | ----- | --- | ----------|
 | show | Boolean | false | Legend 표시 여부 | true /false |
 | position | String | 'right' | Legend 위치 | 'top', 'right', 'bottom', 'left' |
-| color | HexCode(String) | '#353740' | 폰트 색상 | | 
-| inactive | HexCode(String) | '#aaa' | 비활성화 상태의 폰트 색상 | | 
+| color | Hex, RGB, RGBA Code(String) | '#353740' | 폰트 색상 | | 
+| inactive | Hex, RGB, RGBA Code(String) | '#aaa' | 비활성화 상태의 폰트 색상 | | 
 | width | Number | 140 | Legend의 넓이 *('left', 'right'의 경우 조절)* | | 
 | height | Number | 24 | Legend의 높이 *('top', 'bottom'의 경우 조절)* | | 
 
 #### tooltip
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 | --- | ---- | ----- | --- | ----------|
 | use | Boolean | true | tooltip 표시 여부 | true /false |
-| backgroundColor | HexCode(String) | '#4C4C4C' | tooltip 배경 색상  | |
-| borderColor | HexCode(String) | '#666666' | tooltip 테두리 색상  | |
+| backgroundColor | Hex, RGB, RGBA Code(String) | '#4C4C4C' | tooltip 배경 색상  | |
+| borderColor | Hex, RGB, RGBA Code(String) | '#666666' | tooltip 테두리 색상  | |
 | useShadow | Boolean | false | 그림자 사용 여부  | |
 | shadowOpacity | Number | 0.25 | 그림자 투명도  | |
 | throttledMove | Boolean | false | 데이터 조회 Throttling 처리 유무  | |
@@ -139,17 +141,17 @@ const chartData =
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 | --- | ---- | ----- | --- | ----------|
 | use | Boolean | true | indicator 사용 여부 | |
-| color | HexCode(String) | '#EE7F44' | 색상  | |
+| color | Hex, RGB, RGBA Code(String) | '#EE7F44' | 색상  | |
 
 #### maxTip
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 | --- | ---- | ----- | --- | ----------|
 | use | Boolean | true | maxTip 표시 여부  | |
 | fixedPosTop | Boolean | false | maxTip 위치를 최대값으로 고정  | |
 | showIndicator | Boolean | false | indicator 표시 여부  | |
-| indicatorColor | HexCode(String) | '#000000' | indicator 색상  | |
-| tipBackground | HexCode(String) | '#000000' | maxTip 배경색상  | |
-| tipTextColor | HexCode(String) | '#FFFFFF' | maxTip 글자 색상  | |
+| indicatorColor | Hex, RGB, RGBA Code(String) | '#000000' | indicator 색상  | |
+| tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | maxTip 배경색상  | |
+| tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | maxTip 글자 색상  | |
 
 #### selectItem
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
@@ -160,9 +162,9 @@ const chartData =
 | showIndicator | Boolean | false | 선택한 label의 indicator 표시  | |
 | fixedPosTop | Boolean | false | indicator 및 tip의 위치를 최대값으로 고정  | |
 | useApproximateValue | Boolean | false | 가까운 label을 선택  | |
-| indicatorColor | HexCode(String) | '#000000' | indicator 색상  | |
-| tipBackground | HexCode(String) | '#000000' | tip 배경색상  | |
-| tipTextColor | HexCode(String) | '#FFFFFF' | tip 글자 색상  | |
+| indicatorColor | Hex, RGB, RGBA Code(String) | '#000000' | indicator 색상  | |
+| tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | tip 배경색상  | |
+| tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | tip 글자 색상  | |
 
 >### Event
 | 이름 | 파라미터 | 설명 |

diff --git a/docs/views/pieChart/api/pieChart.md b/docs/views/pieChart/api/pieChart.md
@@ -21,12 +21,13 @@
   |------------ |-----------|---------|-------------------------|---------------------------------------------------|
   | name | String | series-${index} | 특정 데이터에 대한 시리즈 옵션 |  |
   | type | String | 'bar' | 시리즈에 해당하는 데이터 표현 방식 | 'bar', 'pie', 'line', 'scatter' |
+  | color | Hex, RGB, RGBA Code(String) | COLOR[index] | 사전에 정의된 16개 색상('#2b99f0' ~ '#df6264)을 순차적으로 적용 |  |
 
 #### data example
 ```
 const chartData = 
   series: {
-    series1: { name: 'series1' },
+    series1: { name: 'series1', color: '#FF00FF },
     series2: { name: 'series2' },
   },
   data: {
@@ -54,16 +55,16 @@ const chartData =
 | text | String | '' | 타이틀 | | 
 | style | Object | | 타이틀 폰트 스타일 | | 
 | style.fontSize | Number | 15 | 글자 크기 | | 
-| style.color | HexCode(String) | '#000' | 글자 색상 | | 
+| style.color | Hex, RGB, RGBA Code(String) | '#000' | 글자 색상 | | 
 | style.fontFamily | String | 'Roboto' | 글자체 | |  
 
 #### legend
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 | --- | ---- | ----- | --- | ----------|
 | show | Boolean | false | Legend 표시 여부 | true /false |
 | position | String | 'right' | Legend 위치 | 'top', 'right', 'bottom', 'left' |
-| color | HexCode(String) | '#353740' | 폰트 색상 | | 
-| inactive | HexCode(String) | '#aaa' | 비활성화 상태의 폰트 색상 | | 
+| color | Hex, RGB, RGBA Code(String) | '#353740' | 폰트 색상 | | 
+| inactive | Hex, RGB, RGBA Code(String) | '#aaa' | 비활성화 상태의 폰트 색상 | | 
 | width | Number | 140 | Legend의 넓이 *('left', 'right'의 경우 조절)* | | 
 | height | Number | 24 | Legend의 높이 *('top', 'bottom'의 경우 조절)* | | 
 

diff --git a/docs/views/scatterChart/api/scatterChart.md b/docs/views/scatterChart/api/scatterChart.md
@@ -24,7 +24,8 @@
   |------------ |-----------|---------|-------------------------|---------------------------------------------------|
   | name | String | series-${index} | 특정 데이터에 대한 시리즈 옵션 |  |
   | type | String | 'bar' | 시리즈에 해당하는 데이터 표현 방식 | 'bar', 'pie', 'line', 'scatter' |
-  | color | String | COLOR[index] | 사전에 정의된 16개 색상('#2b99f0' ~ '#df6264)을 순차적으로 적용 |  |
+  | color | Hex, RGB, RGBA Code(String) | COLOR[index] | 점(Point) 바깥쪽 색상. 사전에 정의된 16개 색상('#2b99f0' ~ '#df6264)을 순차적으로 적용 |  |
+  | pointFill | Hex, RGB, RGBA Code(String) | COLOR[index] | 점(Point) 안쪽 색상. 사전에 정의된 16개 색상('#2b99f0' ~ '#df6264)을 순차적으로 적용 |  |
   | pointSize | Number | 3 | 차트에 표시될 점의 사이즈 |  |
   | pointStyle | String | 'circle' | 차트에 표시될 점의 모양 | 'triangle', 'rect', 'rectRounded', 'rectRot', 'cross', 'crossRot', 'star', 'line' |
 
@@ -89,7 +90,7 @@ const chartData =
 | 이름 | 타입 | 디폴트 | 설명 |
 |-----|------|-------|-----|
 | fontSize | Number | 12 | 글자 크기 |
-| color | HexCode (String) | '#25262E' | 글자 색상 |
+| color | Hex, RGB, RGBA Code(String) | '#25262E' | 글자 색상 |
 | fontFamily | String | 'Roboto' | 폰트 | 
 | fitWidth | Boolean | false | Label Text Ellipsis 처리 |
 | fitDir | String | 'right' | Ellipsis 방향 |
@@ -102,32 +103,32 @@ const chartData =
 | text | String | '' | 타이틀 | | 
 | style | Object | | 타이틀 폰트 스타일 | | 
 | style.fontSize | Number | 15 | 글자 크기 | | 
-| style.color | HexCode(String) | '#000' | 글자 색상 | | 
+| style.color | Hex, RGB, RGBA Code(String) | '#000' | 글자 색상 | | 
 | style.fontFamily | String | 'Roboto' | 글자체 | |  
 
 #### legend
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 | --- | ---- | ----- | --- | ----------|
 | show | Boolean | false | Legend 표시 여부 | true /false |
 | position | String | 'right' | Legend 위치 | 'top', 'right', 'bottom', 'left' |
-| color | HexCode(String) | '#353740' | 폰트 색상 | | 
-| inactive | HexCode(String) | '#aaa' | 비활성화 상태의 폰트 색상 | | 
+| color | Hex, RGB, RGBA Code(String) | '#353740' | 폰트 색상 | | 
+| inactive | Hex, RGB, RGBA Code(String) | '#aaa' | 비활성화 상태의 폰트 색상 | | 
 | width | Number | 140 | Legend의 넓이 *('left', 'right'의 경우 조절)* | | 
 | height | Number | 24 | Legend의 높이 *('top', 'bottom'의 경우 조절)* | | 
 
 #### indicator
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 | --- | ---- | ----- | --- | ----------|
 | use | Boolean | true | indicator 사용 여부 | |
-| color | HexCode(String) | '#EE7F44' | 색상  | |
+| color | Hex, RGB, RGBA Code(String) | '#EE7F44' | 색상  | |
 
 
 #### dragSelection
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 | --- | ---- | ----- | --- | ----------|
 | use | Boolean | true | drag-select 사용 여부 | true / false |
 | keepDisplay | Boolean | true | 드래그 후 선택영역 유지 여부  | true / false  |
-| fillColor | HexCode(String) | '#38ACEC' | 선택 영역 색상 | |
+| fillColor | Hex, RGB, RGBA Code(String) | '#38ACEC' | 선택 영역 색상 | |
 | opacity | Number | 0.65 | 선택 영역 불투명도 | 0 ~ 1 |
 
 ### 3. resize-timeout

diff --git a/src/components/chart/element/element.bar.js b/src/components/chart/element/element.bar.js
@@ -132,18 +132,21 @@ class Bar {
       }
 
       const barColor = item.dataColor || this.color;
-      const opacity = this.state === 'downplay' ? 0.1 : 1;
+      const isDownplay = this.state === 'downplay';
 
       if (typeof barColor !== 'string') {
         ctx.fillStyle = Canvas.createGradient(
           ctx,
           isHorizontal,
           { x, y, w, h },
           barColor,
-          opacity,
+          isDownplay,
         );
       } else {
-        ctx.fillStyle = `rgba(${Util.hexToRgb(barColor)},${opacity})` || '';
+        const noneDownplayOpacity = barColor.includes('rgba') ? Util.getOpacity(barColor) : 1;
+        const opacity = isDownplay ? 0.1 : noneDownplayOpacity;
+
+        ctx.fillStyle = Util.colorStringToRgba(barColor, opacity);
       }
 
       this.drawBar({

diff --git a/src/components/chart/element/element.bar.time.js b/src/components/chart/element/element.bar.time.js
@@ -104,7 +104,8 @@ class TimeBar extends Bar {
 
       if (x !== null && y !== null) {
         const barColor = item.dataColor || this.color;
-        const opacity = this.state === 'downplay' ? 0.1 : 1;
+        const noneDownplayOpacity = barColor.includes('rgba') ? Util.getOpacity(barColor) : 1;
+        const opacity = this.state === 'downplay' ? 0.1 : noneDownplayOpacity;
 
         if (typeof barColor !== 'string') {
           w = w !== subW ? subW : w;
@@ -114,10 +115,10 @@ class TimeBar extends Bar {
             isHorizontal,
             { x, y, w, h },
             barColor,
-            opacity,
+            opacity === 0.1,
           );
         } else {
-          ctx.fillStyle = `rgba(${Util.hexToRgb(barColor)},${opacity})` || '';
+          ctx.fillStyle = Util.colorStringToRgba(barColor, opacity);
         }
 
         this.drawBar({