Allow for custom colors about tremor HOT 23 CLOSED

Hi @mitrotasios great, thank you for this awesome library :)

from tremor.

My company also requires custom colors for branding, so this is a necessary feature for us. I created a workaround which I'll use until the feature is available.

MyDonut.tsx

<div className={styles.donut}>
    <Donut
        data={genderSessionLength}
        category="sales"
        dataKey="name"
        marginTop="mt-6"
        showLabel={false}
    />
</div>

MyDonut.module.scss

.donut {
    [class="recharts-layer recharts-pie-sector"]:nth-of-type(1) > path {
        fill:yellow;
    }
    
    [class="recharts-layer recharts-pie-sector"]:nth-of-type(2) > path {
        fill:blue;
    }
}

Explanation

The donut sections are path elements, where each path has a parent element g with class recharts-layer recharts-pie-sector. The g parents are siblings, which allows us to use the nth-of-type selector.

The styling applies a certain fill to the path below the nth donut section.

from tremor.

Custom colouring or theming is the next big thing on our roadmap. We don't have a timeline on this as there are certain challenges regarding customisation given our tailwind dependency.

@djkgamc, sorry that you had this experience. IMO exploring the limitations of a tool should be the responsibility of the end user, therefore I don't think adding a disclaimer is appropriate.

from tremor.

Great to know it's on the roadmap! Did it anyway because we had to, but it was such a PITA to implement charts in anything else after using Tremor :)

from tremor.

🎉 This issue has been resolved in version 3.12.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

from tremor.

I just found this project and I have the same concern. I'd love to use this in a complex service I'm currently building, but branding is a top priority. I'm currently building all my components from scratch because there isn't another elegant and expansive library built on Tailwind. I'd like to think this would be a big issue for a lot of others as well.

from tremor.

Hello! Also wanted to add our team has started to use this library for developing our dashboard, it is amazing but I agree it is a definitely and expectation that you can use custom colors, specifically in the bar chart.

from tremor.

Hey @zachterrell57, thanks for the kind words and for the point you're raising! It is valid and we are busy at the moment gathering all the feedback we can get in order to (re-)evaluate our design for the next major release. We cannot give a definite answer yet unfortunately, but we will definitely consider this as it came up often.

Would if be ok if we reach out to you in the future to discuss such decisions? Would really appreciate this.

Absolutely! Feel free to reach out whenever.

from tremor.

🎉 This issue has been resolved in version 3.12.0-beta.1 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

from tremor.

Hey @zachterrell57, thanks for the kind words and for the point you're raising! It is valid and we are busy at the moment gathering all the feedback we can get in order to (re-)evaluate our design for the next major release. We cannot give a definite answer yet unfortunately, but we will definitely consider this as it came up often.

Would if be ok if we reach out to you in the future to discuss such decisions? Would really appreciate this.

from tremor.

thanks everyone, we really appreciate the feedback! We try to build tremor together with the community and this feedback came up a lot, so we are definitely leaning to a more customisable architecture for our next major release.

from tremor.

Just reporting an issue, when using the colors "white" or "black" in textual components, the color became a default blue.

from tremor.

Hi @lsimunec, thanks for your comment! we do currently not support white and black as input colors, this is why that behaviour is expected, i.e. the default color blue is being set. We will add these colours as inputs soon though.

from tremor.

Just installed tremor in our customer dashboard, and what I see, impossible to use custom colors..

This is definitely a must have, tremor looks have brillant future but how many companies will not use it without custom branding?

from tremor.

Agreed on inability to use w/o custom colors. I think if you had put it in the documentation a little bit more explicitly, then I wouldn't have used Tremor at all at the moment. I think the documentation does say the limitation, I just didn't fully understand it was hard limiation. I just finished everything in Tremor, but now am going to reimplement the whole thing in another library for this reason.

from tremor.

@mitrotasios is there any update or ETA on custom colors?

from tremor.

sorry, unfortunately there's no particular ETA on this, it may take some time tbh as we are currently busy with other stuff as well. We are also open to contributions from the community and to suggestions on how to solve this elegantly :)

from tremor.

Can also vouch that we need this 🙏🏼

from tremor.

Please help me for lengue programmer i will be it. Showing me slowly about programmer. Sorry i promise us. Apology. I will be sharing with us.

from tremor.

I have a similar issue with the line chart - I want custom colors for my lines. I've found the following workaround pretty easy and works 100% of the time (as far as I can tell). In this case, past is the name of the line (I only want to edit one line's color, and use a default for the other), and I'm setting the new color to a standard red:

path[name="past"].recharts-line-curve { stroke: red; }

from tremor.

Same! I'd love to use Tremor but branding is crucial so I can't use it without custom colors

from tremor.

🎉 This issue has been resolved in version 3.12.0-beta-package-updates.1 🎉

The release is available on:

• npm package (@beta-package-updates dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

from tremor.

🎉 This issue has been resolved in version 3.12.0-beta-customcolors.1 🎉

The release is available on:

• npm package (@beta-customcolors dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

from tremor.