DevExtreme React Bar Chart - Zero-value labels not showing

66 Views Asked by At

I've had a bit of a time trying to achieve something with a Bar Chart using the DevExtreme-React library that seems possible according to the available options in the documentation, but things just aren't cooperating.

Basically I want to have it so that when a series has a value less then 10 the bar is not visible, but a '<10' label is applied as if it has a value of 0 (so not inadvertently revealing the values less than 10). I've been trying to do this through two approaches:

  1. For each data point object in the dataSource array, if the value is less then 10, set it to 0 in the object before sending it to the chart-generating code - this should result in no bar but a '<10' label being applied at the x axis

OR

  1. For each data point object in the dataSource array, if the value is less then 10, do not render the Bar series but still render the label as '<10'

I have been primarily trying to achieve this via approach #1, because true 0 values are filtered out ahead of time and I figure that the easiest thing to do would be to just set values to 0 and then have the custom '<10' label displayed. But this never works, even when I set CommonSeriesSettings.label.showForZeroValues to true and ValueAxis.showZero to true.

I briefly tried #2, but I couldn't find a way to conditionally set the height of a Bar series.

Here is my React code (dataSource objects described below for normal/unmodified and #1 cases):

<Chart 
    dataSource={dataSource}
    customizeLabel={(seriesObject) => {
        if (seriesObject.value > 0 && seriesObject.value < 10) {
            return {
                customizeText(e) {
                    return "<10"
    }}}}}
>
  <CommonSeriesSettings 
       valueField="subjects"
       argumentField="response"
       type="bar"
       label={{ 
           visible:true, 
           backgroundColor: "rgba(0,0,0,0)", 
           font: {color:'rgb(118,118,118)', size: 12},
           showForZeroValues: true
        }}
   />

   <SeriesTemplate
        nameField="valid"
        customizeSeries={(seriesName) => {
           if (seriesName === legendLabel.valid) {
              return { color: "rgba(175,238,238,0.7)" }
           } else {
             return { color: "rgba(242,167,56,0.7)" }}}}
   />

   <ValueAxis
        title={{text: "Participants", font: {size: 12, color: 'grey', weight: 'normal'}}}
        autoBreaksEnabled={true}
        maxAutoBreakCount={1}
        showZero={true}
   />
</Chart>

Unmodified dataSource Object (unmodified data but custom label when value is <10)

[{ response: "No", subjects: 3285, valid: "Valid" },
{ response: "Yes", subjects: 5, valid: "Valid" }]

With the resulting bar chart: enter image description here

This is close, but I don't want the bar to be visible when the value is less then 10 - so I try setting the value for those cases to 0.

Modified dataSource Object (setting values less than 10 to 0)

[{ response: "No", subjects: 3285, valid: "Valid" },
{ response: "Yes", subjects: 0, valid: "Valid" }]

With its resulting problematic bar chart, where there is no label enter image description here

Now the data point is correctly set to 0, but there is no label, despite using the CommonSeriesSettings.showForZeroValues and ValueAxis.showZero options. It seems like a bug, but I figure really I am just not doing something correctly.

Thank you in advance for any help you can provide!

0

There are 0 best solutions below