Colors on Line chart not changed

Topic: Colors on Line chart not changed

orik 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 pro premium commented 7 years ago

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

orik commented 7 years ago

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

Bartłomiej Malanowski staff pro premium commented 7 years ago

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

orik commented 7 years ago

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

orik commented 7 years ago

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

Bartłomiej Malanowski staff pro premium commented 7 years ago

please create pastebin with your code

orik commented 7 years ago

https://pastebin.com/CdPcBxW2

orik commented 7 years ago

i hope this enough for get help

Add comment

Mirosław Stasiak 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]

orik commented 7 years ago

Very nice! it's work!

orik commented 7 years ago

Thank you!

Add comment

Koper 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

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

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

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

About author

orik

0Support score
2Questions 0Answers

0Snippets likes 0Snippets