Stroke color function support added to customize bar borders based on value paramater

[Digvijayrao-KF]

New Pull Request

color prop under stroke object will now support function that will accept params like value, dataPointIndex & w. This will allow the user to change the border color based on values plotted on y-axis for horizontal bar charts.

Fixes #4360

Type of change

Please delete options that are not relevant.

• New feature (non-breaking change which adds functionality)
• This change requires a documentation update

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• Existing unit tests pass locally with my changes

[junedchhipa]

@Digvijayrao-KF Can you post a screenshot of what this accomplishes? Also, post a code sample to how you will use this option so I can reproduce.

[Digvijayrao-KF]

@Digvijayrao-KF Can you post a screenshot of what this accomplishes? Also, post a code sample to how you will use this option so I can reproduce.

Hi @junedchhipa ,

We can see the series 2 border color changes for the paths based on values plotted on inverse x-axis/y-axis

Code Sample

Below snippet can be added under react-apexcharts example directory for Bar.jsx file
Usage is for stroke: { colors: [...] } prop

this.state = {
    series: [
      {
        data: [ 4, 3.5, 5, 2.7, 3.8, 4.6 ]
      },
      {
        data: [ 5, 3.7, 2.8, 5, 3.2, 3.5 ]
      }
    ],
    options: {
      colors: [
        function ( { value, seriesIndex } )
        {
          if ( value < 3.6 ) return seriesIndex == 1 ? '#f3fbff' : '#54A0FF'
          else return seriesIndex == 1 ? '#f3fbff' : '#FFC759'
        }
      ],
      chart: {
        type: 'bar',
        height: 130
      },
      plotOptions: {
        bar: {
          borderRadius: 6,
          borderRadiusApplication: 'end',
          horizontal: true,
          barHeight: '50%'
        }
      },
      dataLabels: {
        enabled: false
      },
      xaxis: {
        categories: [
          'Optimism',
          'Trust',
          'Humility',
          'Influence',
          'Scalability',
          'Empathy'
        ],
        axisBorder: {
          offsetX: -3
        },
        min: 1,
        max: 5,
        stepSize: 1,
        forceNiceScale: true,
        tickAmount: 1
      },
      stroke: {
        show: true,
        width: 2,
        colors: [
          '',     // indicates series 1
          function ( { value } )    // indicates series 2
          {
            return value < 3.6 ? '#54A0FF' : '#FFC759'
          }
        ]
      },
      grid: {
        yaxis: {
          lines: {
            show: false
          }
        }
      },
      legend: {
        show: false
      }
    }
  }

[Digvijayrao-KF]

Hi @junedchhipa,
Looking forward to your prompt response as we require this feature to be available sooner.
Thanks.