Colors on Line chart not changed

Topic: Colors on Line chart not changed

orik free asked 7 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 7 years ago

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

orik free commented 7 years ago

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

Bartłomiej Malanowski staff commented 7 years ago

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

orik free commented 7 years ago

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

orik free commented 7 years ago

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

Bartłomiej Malanowski staff commented 7 years ago

please create pastebin with your code

orik free commented 7 years ago

https://pastebin.com/CdPcBxW2

orik free commented 7 years ago

i hope this enough for get help

Add comment

Mikołaj Smoleński staff answered 6 years ago

0 0 Best answer

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

Please insert min. 20 characters.

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

Add comment

Wojciech K free answered 6 years ago

0 0 Best answer

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

Please insert min. 20 characters.

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

Add comment

Mirosław Stasiak free answered 7 years ago

1 0 Best answer

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]

Please insert min. 20 characters.

Check this code, now should be fine

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

orik free commented 7 years ago

Very nice! it's work!

orik free commented 7 years ago

Thank you!

Add comment

Write

Create snippet

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

orik

0Support score
2Questions 0Answers 0Snippets