frappe / charts

Simple, responsive, modern SVG Charts with zero dependencies
https://frappe.io/charts
MIT License
14.9k stars 716 forks source link

Color Customization - For each bar #353

Open saru2020 opened 2 years ago

saru2020 commented 2 years ago

Expected Behaviour

In Bar Chart: Is there a way for me to differentiate the positive & negative values aka defining colour for every single data bar/point? Note: This would be visually appealing for PnL statements.

Actual Behaviour

Screenshot 2021-08-22 at 9 58 31 PM

Steps to Reproduce:

This is configuration code of the chart:

const chart = new frappe.Chart(chartElementId, {  
                title: title,
                data: data,
                type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
                height: 250,
                colors: ['#7cd6fd'],
                axisOptions: {
                    xIsSeries: true // default: false
                },
                // lineOptions: {
                //     hideDots: 1 // default: 0
                // }
            })

Frappé Charts version: 1.6.2

cap-code commented 2 years ago

I think there is no way for that for now. Correct me if i am wrong . Maybe in future update they will put this feature

khromov commented 1 year ago

👋 I have a similar problem, I'm making a line chart that displays hourly price data (the x axis is 0-23 hrs) and would like to outline the current hour in a different color. I guess there is a similar limitation as on the bar chart?