Topic: Colors on Line chart not changed

orik free asked 6 years ago


i try change colors on line chart where default like that -
fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",

i was set like that :
fillColor: "rgba(48,165,255,0.2)",
 strokeColor: "rgba(48,165,255,1)",
 pointColor: "rgba(48,165,255,1)",
 pointStrokeColor: "#fff",
 pointHighlightFill: "#fff",
 pointHighlightStroke: "rgba(48,165,255,1)",
but nothing was changed, how can i change colors on line chart correctly?

Bartłomiej Malanowski staff commented 6 years ago

do you use MDB jQuery/MDB Angular? What's your version of MDB?

orik free commented 6 years ago

not, i'm not use Angular, its MDB Free version 4.4 0 Beta

Bartłomiej Malanowski staff commented 6 years ago

I cannot locate variables like fillColor etc. Could you please tell me where to find it?

orik free commented 6 years ago

on here http://www.javascripter.net/faq/hextorgb.htm i just convert color from hex

orik free commented 6 years ago

instructons for use here https://mdbootstrap.com/javascript/charts/

Bartłomiej Malanowski staff commented 6 years ago

please create pastebin with your code

orik free commented 6 years ago

https://pastebin.com/CdPcBxW2

orik free commented 6 years ago

i hope this enough for get help

Mikołaj Smoleński staff answered 5 years ago


Please use the following code:
{
 label: "My Second dataset",
 backgroundColor: "rgba(151,187,205,0.4)",
 borderColor: "rgba(151,187,205,1)",
 pointBackgroundColor: "rgba(151,187,205,1)",
 pointStrokeColor: "#fff",
 pointBorderColor: "#fff",
 pointHoverBackgroundColor: "rgba(151,187,205,1)",
 data: [28, 48, 40, 19, 86, 27, 90]
}
Best Regards  

Wojciech K free answered 5 years ago


Howdy! Sorry for bump old topic but currently working on new product have exactly same issue => after changing colors from default to custom nothing changes at all (it should be green but was grey as default). It's some bug or...? Is this option available only in pro version?
data: {
    labels: $('#resultsTable td:nth-child(1)').map(function () {
        return $(this).text();
    }).get(),
    datasets: [
        {
            label: "some label of chart",
            fillColor: "rgba(139, 195, 74, 0.2)",
            strokeColor: "rgba(139, 195, 74, 1)",
            pointColor: "rgba(139, 195, 74, 1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(139, 195, 74, 1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        }
    ]
},
Thanks in advance for any support. Regards. Wojciech

Mirosław Stasiak free answered 6 years ago


Check this code, now should be fine
 label: "My First dataset",
 backgroundColor : "rgba(220,220,220,0.2)",
 borderWidth : 2,
 borderColor : "rgba(220,220,220,1)",
 pointBackgroundColor : "rgba(220,220,220,1)",
 pointBorderColor : "#fff",
 pointBorderWidth : 1,
 pointRadius : 4,
 pointHoverBackgroundColor : "#fff",
 pointHoverBorderColor : "rgba(220,220,220,1)",
 data: [65, 59, 80, 81, 56, 55, 40]
 

orik free commented 6 years ago

Very nice! it's work!

orik free commented 6 years ago

Thank you!


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: Other
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags