Same colors are displayed differently

literakl commented 3 years ago

Describe the bug I have the same colors for two different charts: :colors="[['#28a745', '#007bff', '#ffc107', '#dc3545']]". I want the same colors to be displayed. Colors are different:

To reproduce

https://codesandbox.io/s/pensive-williamson-upohe?file=/src/components/HelloWorld.vue:37-400

"vue-chartkick": "^0.6.1", "chart.js": "^2.9.4",

<column-chart
      :data="votesData"
      height="200px"
      :colors="[['#28a745', '#007bff', '#ffc107', '#dc3545']]"
    >
    </column-chart>
    <bar-chart
      :data="chartData"
      suffix="%"
      height="100px"
      :colors="['#28a745', '#007bff', '#ffc107', '#dc3545']"
      :stacked="true"
      :library="{ options: { tooltips: false } }"
    >

Chartjs claims the problem lies in a wrapper: https://github.com/chartjs/Chart.js/issues/8046

HTML generated by Chartkick



<canvas width="1233" height="100" class="chartjs-render-monitor" style="display: block; width: 1233px; height: 100px;"></canvas>

LeeLenaleee commented 3 years ago

A workaround is to instead of give the RGB HEX value submit the RGBA hex values. In that case you can see that both charts show the same color gradiant. Also for ease of work try to not hardcode your colors in the html but put them in your data and pass that variable in your html

See example: https://codesandbox.io/s/immutable-worker-3qxgj

literakl commented 3 years ago

Thank you. Your solution works! If you are on Stackoverflow, I just offered a bounty: https://stackoverflow.com/questions/64811140/differently-displayed-colors-on-chart-js

ankane / chartkick

Same colors are displayed differently #556