search

lafriks / vue-bar-graph

Simple and lightweight vue chart component without using chart library dependencies
5 stars 3 forks source link

How can I give each bar a different color? #7

Closed dragon74 closed 3 years ago

lafriks commented 3 years ago

see example here: https://github.com/lafriks/vue-bar-graph/blob/master/src/App.vue#L176

dragon74 commented 3 years ago

Thanks for the quick reply! I defined the points like this, but the bars are still blue...

let res = [{label: lbl1, value: 10, barColor: '#00ff00', textColor: '#00ffff', textAltColor: '#0000ff'}, {label: lbl2, value: 20, barColor: '#ff0000',textColor: '#00ffff', textAltColor: '#0000ff'}]

<vue-bar-graph v-show="showGraph" :points="points" :width="1000" :height="500"
:show-x-axis="true" :show-values="true" :text-font="50" :label-height="52"
/>

lafriks commented 3 years ago

do you use latest 1.3.0 version?

dragon74 commented 3 years ago

Updated to 1.3 and the colors worked, thanks a lot!!! One last thing - the label height does not affect, and I get the attached result with this def (played with the height but no effect)

<vue-bar-graph v-show="showGraph" :points="points" :width="1000" :height="500" :show-x-axis="true" :show-values="true" :text-font="'40px sans-serif'" :label-height="100" />

On Fri, May 21, 2021 at 5:15 PM Lauris BH @.***> wrote:

do you use latest 1.3.0 version?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/lafriks/vue-bar-graph/issues/7#issuecomment-845980761, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAXXCLWIQHHLSSO23HNO733TOZTJDANCNFSM45JEUBWA .

lafriks commented 3 years ago

try:

 :text-font="'sans-serif 40px'"
dragon74 commented 3 years ago

Then the font is smaller (I guess the default is taken)

Thanks< Danny

On Sun, May 23, 2021 at 3:20 AM Lauris BH @.***> wrote:

try:

:text-font="'sans-serif 40px'"

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/lafriks/vue-bar-graph/issues/7#issuecomment-846480563, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAXXCLU5J6LN3QZ3UQD3MB3TPBC4VANCNFSM45JEUBWA .