Scrollable Bullet Chart

Development PatternFly-React
#1

I am using the Patternfly Bulletchart in React. When I try and add more bullet charts to the container, it disappears below the react container rather than allowing a scrollable y axis function. The problem is that the Patternfly graph containers are translated to an SVG which does not allow the container to be scrollable. Is there a way I can make the bullet chart scrollable? I have tried setting the containers to allow for overflow but that does not work.

Untitled
Untitled1337×261 13.6 KB 

   <div className="rounded-lg flex flex-col col-span-full xl:col-span-12 bg-white shadow-lg rounded-sm border border-gray-200" >
         
          <ChartContainer
            height={100}
            width={1200}
          >
  
            <ChartBullet
              comparativeWarningMeasureData={[{ name: 'Benchmark', y: 78 }]}
              constrainToVisibleArea
              groupSubTitle="Measure details"
              groupTitle="Progress of Each Level"
              height={675}  
              labels={({ datum }) => `${datum.name}: ${datum.y}`}
              
              maxDomain={{ y: 100 }}
              padding={{
                bottom: 100, // Adjusted to accommodate legend
                left: 200, // Adjusted to accommodate labels
                right: 50,
                top: 275 // Adjusted to accommodate group labels
              }}
              qualitativeRangeComponent={
                <ChartBulletQualitativeRange
                  measureComponent={
                    <ChartBar style={{data: { fill: '#A9A9A9' }}} />
                  }
                //  theme={myCustomTheme}
                />
              }
              primarySegmentedMeasureComponent={
                <ChartBulletPrimarySegmentedMeasure
                     theme={this.myCustomTheme}
                />
              }
              primarySegmentedMeasureData={[{ name: 'Measure', y: 15 }, { name: 'Measure', y: 50 }, { name: 'Measure', y: 66}]}
              qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}
              standalone={false}
              subTitle="Measure details"
              title="Growth Mindset"
              width={1200}
            //  themeColor={ChartThemeColor.multiOrdered}

            />

            ...
#2

The first issue here is the use of ChartContainer. That component is typically used with charts like area, line, etc. It allows you to add axis labels, etc. The bullet chart doesn’t use it per the examples below.

http://patternfly-react.surge.sh/charts/bullet-chart

Second, the div container surrounding your chart must be sized appropriately. The reason your chart disappears is the container isn’t tall enough. To maintain a proper aspect ratio, you chart and div container should be the same size.

If you really want scrolling, you can add scroll to any div container.

The code below was slightly modified from a PatternFly example. I simply added a second chart and added scroll to my outer div.

const Basic = () => (
  <div style={{height: '200px', overflow: 'scroll'}}>
    <div style={{ height: '150px', width: '600px' }}>
      <ChartBullet
        ariaDesc="Storage capacity"
        ariaTitle="Bullet chart example"
        comparativeWarningMeasureData={[{ name: 'Warning', y: 88 }]}
        constrainToVisibleArea
        height={150}
        labels={({ datum }) => `${datum.name}: ${datum.y}`}
        maxDomain={{y: 100}}
        primarySegmentedMeasureData={[{ name: 'Measure', y: 60 }]}
        qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}
        width={600}
      />
    </div>
    <div style={{ height: '150px', width: '600px' }}>
      <ChartBullet
        ariaDesc="Storage capacity"
        ariaTitle="Bullet chart example"
        comparativeWarningMeasureData={[{ name: 'Warning', y: 88 }]}
        constrainToVisibleArea
        height={150}
        labels={({ datum }) => `${datum.name}: ${datum.y}`}
        maxDomain={{y: 100}}
        primarySegmentedMeasureData={[{ name: 'Measure', y: 60 }]}
        qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}
        width={600}
      />
    </div>
  </div>
)
#3

chrome-capture (1)

#5

That works perfectly, Thanks for the help!!