LG-5588 more chart customization points #3274
Merged
+580
−366
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 29f71a9 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
nima-taheri-mongodb
changed the title
Contributor
|
Size Change: +1.99 kB (+0.11%) Total Size: 1.81 MB
ℹ️ View Unchanged
|
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR adds customization options to the charts library to support different chart visualization needs, particularly for bar charts. The changes introduce three new configuration points: tooltip axis pointer control, bar hover emphasis behavior, and a category axis type for discrete data alignment.
Key changes:
- Added
axisPointerprop toChartTooltipto control the vertical hover line visibility - Added
emphasisprop toBarcomponent for controlling hover focus behavior - Added
categorytype toXAxisfor proper discrete data label alignment
Reviewed Changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
charts/core/src/XAxis/XAxis.types.ts |
Adds Category axis type with documentation explaining its use for discrete data |
charts/core/src/Series/Bar/Bar.tsx |
Adds emphasis prop and refactors component to use destructured props |
charts/core/src/ChartTooltip/ChartTooltip.types.ts |
Adds axisPointer prop type definition with documentation |
charts/core/src/ChartTooltip/ChartTooltip.tsx |
Implements axisPointer configuration and adds dark mode fix class |
charts/core/src/Chart.stories.tsx |
Adds three new stories demonstrating the new customization features |
.changeset/rotten-parrots-stare.md |
Documents the changes for release notes |
charts/core/src/Series/Bar/Bar.tsx
Outdated
| * - `self`: Upon hovering over a bar, all other bars will be dimmed. | ||
| * - `none`: Other bars will not be affected by the hover. | ||
| */ | ||
| emphasis?: 'self'; |
There was a problem hiding this comment.
The emphasis prop only accepts 'self' but the documentation mentions 'none' as an option. Consider adding 'none' to the type definition: emphasis?: 'self' | 'none' to match the documented behavior and the story's argTypes.
Suggested change
| emphasis?: 'self'; | |
| emphasis?: 'self' | 'none'; |
Collaborator
Author
There was a problem hiding this comment.
Fixed! ✨ The emphasis prop now includes both 'self' | 'none' in the type definition (commit b3fdac1).
Comment on lines
22
to
24
| * Controls the type of axis pointer shown with the tooltip. Default is 'line' | ||
| * which shows a vertical dashed line on hover. Set to 'none' for bar charts to | ||
| * avoid the dashed line from being rendered on top of the bars. |
There was a problem hiding this comment.
Consider defining a default value in the type documentation. The comment states 'Default is 'line'' but the type doesn't enforce this. Either add = 'line' in the component signature or explicitly handle the undefined case in the implementation.
Suggested change
| * Controls the type of axis pointer shown with the tooltip. Default is 'line' | |
| * which shows a vertical dashed line on hover. Set to 'none' for bar charts to | |
| * avoid the dashed line from being rendered on top of the bars. | |
| * Controls the type of axis pointer shown with the tooltip. | |
| * If not provided, the default is 'line', which shows a vertical dashed line on hover. | |
| * Set to 'none' for bar charts to avoid the dashed line from being rendered on top of the bars. |
Collaborator
Author
There was a problem hiding this comment.
The axisPointer parameter now has a default value of 'line' in the component signature (ChartTooltip.tsx line 21), so the behavior matches the documentation 👍
tsck
reviewed
Oct 31, 2025
Collaborator
tsck
left a comment
tsck
left a comment
There was a problem hiding this comment.
A few thoughts but otherwise looks good!
| * with the tooltip styles. | ||
| */ | ||
| className: CHART_TOOLTIP_CLASSNAME, | ||
| className: `${CHART_TOOLTIP_CLASSNAME} darkreader-ignore-inline-style`, |
Collaborator
There was a problem hiding this comment.
I'm wondering if this should be built into the component or if we should allow the component to accept a className prop, that way it can be passed in if needed. My thought is that this is MMS specific. What do you think?
Collaborator
Author
There was a problem hiding this comment.
Correct, and good point! I changed this as you advised to be more flexible. ChartTooltip component now accepts an optional className prop (commit b3fdac1). MMS can now pass in the class darkreader-ignore-inline-style to avoid dark mode issues.
charts/core/src/XAxis/XAxis.types.ts
Outdated
| * using 'category', the charting library may automatically determine axis label positions, | ||
| * which might not correspond to each bar or data point. | ||
| */ | ||
| Category: 'category', |
Collaborator
There was a problem hiding this comment.
This was originally included but removed before v1 since it made no sense for line charts. Makes sense though for a bar chart of course! If we're going to add this to the x-axis, should we add it to the y-axis as well? It might not add much value but perhaps for consistency it makes sense.
Collaborator
Author
There was a problem hiding this comment.
Great call on keeping things consistent! I also discovered with more testing that for the 'category' axis type, it's important to always provide the data prop. otherwise, Apache ECharts won't display the category labels correctly.
To improve consistency and avoid code duplication, I factored out all common axis properties and types into a single shared Axis.types.ts file. Now, both XAxisProps and YAxisProps extend a common AxisProps type, which supports the 'category' type.
charts/core/src/Series/Bar/Bar.tsx
Outdated
| * - `self`: Upon hovering over a bar, all other bars will be dimmed. | ||
| * - `none`: Other bars will not be affected by the hover. | ||
| */ | ||
| emphasis?: 'self'; |
Collaborator
There was a problem hiding this comment.
Agree with copilot here, I think you missed 'none' in the type here.
Collaborator
Author
There was a problem hiding this comment.
Fixed! Added 'none' to the type definition as you and Copilot both suggested (commit b3fdac1) 🎉
nima-taheri-mongodb
force-pushed
the
lg_5588_chart_improvements
branch
from
a0283de to
7134bf4
Compare
nima-taheri-mongodb
requested review from
a team,
adamrasheed and
tsck
and removed request for
a team and
tsck
Collaborator
Author
|
Hi @adamrasheed, I removed Terrence from reviewers as I noticed he's on vacation until Nov 10 and you were auto-assigned. Kindly please take a look whenever you had time 🙏 |
TheSonOfThomp
requested changes
Nov 6, 2025
charts/core/src/Axis/Axis.types.ts
Outdated
| */ | ||
| label?: string; | ||
| } & ( | ||
| | { |
Collaborator
There was a problem hiding this comment.
nit: not necessary, but it might be cleaner to create ContinuousAxisProps and DiscreteAxisProps, and then set AxisProps = ContinuousAxisProps | DiscreteAxisProps
Collaborator
There was a problem hiding this comment.
Especially now that I see we export ContinuousAxisProps anyway
Collaborator
Author
There was a problem hiding this comment.
Like your suggestion! 💡 Refactor it to:
type AxisPropsBase = {...}
export type ContinuousAxisProps = {...}
export type DiscreteAxisProps = {...}
export type AxisProps = ContinuousAxisProps | DiscreteAxisProps
charts/core/src/Axis/Axis.ts
Outdated
Comment on lines
23
to
25
| ...(type !== 'category' && { min: props.min }), | ||
| ...(type !== 'category' && { max: props.max }), | ||
| ...(type === 'category' && { data: props.data }), |
Collaborator
There was a problem hiding this comment.
nit: don't love this, but not sure if any alternative would be cleaner. This will get clunky if we have multiple non-continuous axis types
charts/core/src/Series/Bar/Bar.tsx
Outdated
| * - `self`: Upon hovering over a bar, all other bars will be dimmed. | ||
| * - `none`: Other bars will not be affected by the hover. | ||
| */ | ||
| emphasis?: 'self' | 'none'; |
Collaborator
There was a problem hiding this comment.
I think hoverBehavior (or focusBehavior) would be a clearer prop name here
Collaborator
Author
There was a problem hiding this comment.
Sure, done.
One point though, hoverBehavior is definitely more descriptive than emphasis but the only reason I used emphasis is because that's the exact property name in Apache ECharts' API, which makes it easier to map directly to the underlying library.
I'm happy either way, let me know what you think.
Collaborator
There was a problem hiding this comment.
One of the principles we had when specing the initial charts work was that we didn't want to tie ourselves too closely to the ECharts library, in case they change things, or we decide to go with a different library, our API is just abstractions of that library
Collaborator
Author
There was a problem hiding this comment.
Hmm, I see. I imagine that it'll be a difficult migration as we get more comfortable and tie LG to more features of ECharts. 😁
stephl3
reviewed
Nov 6, 2025
Collaborator
stephl3
left a comment
stephl3
left a comment
There was a problem hiding this comment.
hi @nima-taheri-mongodb I'm doing a more comprehensive review now but have 1 ask while continuing to review: can you use git mv for the file subdir changes? this helps with preserving the git history log
TheSonOfThomp
approved these changes
Nov 6, 2025
charts/core/src/Series/Bar/index.ts
Outdated
| @@ -1,2 +1 @@ | |||
| export type { BarProps } from './Bar'; | |||
| export { Bar } from './Bar'; | |||
| export { Bar, BarHoverBehavior } from './Bar'; | |||
Collaborator
There was a problem hiding this comment.
I think this is why the builds are failing
/home/runner/work/leafygreen-ui/leafygreen-ui/charts/core/src/Series/index.ts (1,20): Module '"./Bar"' has no exported member 'BarProps'.
ELIFECYCLE Command failed with exit code 1.
Error: command finished with error: command (/home/runner/work/leafygreen-ui/leafygreen-ui/charts/core) /home/runner/setup-pnpm/node_modules/.bin/pnpm run tsc exited (1)
Suggested change
| export { Bar, BarHoverBehavior } from './Bar'; | |
| export { Bar, BarHoverBehavior, type BarProps } from './Bar'; |
Collaborator
Author
There was a problem hiding this comment.
Thanks Adam! I noticed it and fixed it on my laptop.
Currently trying to digest Stephen's suggestion (I'm getting myself familiar with how git persists renames and moves when file content changes) and see if I can preserve git history properly.
Collaborator
There was a problem hiding this comment.
I haven't used git mv retroactively, so I'm not sure if it's possible. You likely would need to reset to the commit prior to moving the files, run git mv, then re-apply changes. It's not imperative, so feel free to ignore that feedback if time is sensitive
Collaborator
Author
There was a problem hiding this comment.
I appreciated your suggestion about using git mv to help preserve git history. Definitely important!
From what I understand, git actually tracks changes as additions and deletions, and doesn't record file moves explicitly. File move detection is performed by git using heuristics (like checking content similarity or hashes), not by storing the movement as part of the commit history.
You made me question my assumptions especially by mentioning the git mv command so I dug in a bit more. It seems that in cases where both file path and content changes, you generally need to commit the move separately from any edits. Otherwise, git's move detection will often miss it if the file changes significantly at the same time.
Since our github workflow enforces squash-and-merge (combine all PR commits into one), any intermediate move commits would get flattened, and we'd lose that history anyway if there were substantial changes to the file contents (which is the case in my PR). So I don't see any way to preserve the move history in this case.
Let me know if I'm misunderstanding something or there's a way to do it.
stephl3
reviewed
Nov 6, 2025
Collaborator
stephl3
left a comment
stephl3
left a comment
There was a problem hiding this comment.
Was able to get this working locally and all looks/works well!
charts/core/src/Series/Bar/index.ts
Outdated
| @@ -1,2 +1 @@ | |||
| export type { BarProps } from './Bar'; | |||
| export { Bar } from './Bar'; | |||
| export { Bar, BarHoverBehavior } from './Bar'; | |||
Collaborator
There was a problem hiding this comment.
do we need to keep the BarProps export?
Collaborator
There was a problem hiding this comment.
just checked locally, and that seems to be what's breaking the build
Collaborator
Author
There was a problem hiding this comment.
Hey Stephen, that's correct.
charts/core/src/index.ts
Outdated
| EventMarkerPoint, | ||
| type EventMarkerPointProps, | ||
| } from './EventMarkers'; | ||
| export { Bar, type BarProps, Line, type LineProps } from './Series'; |
Collaborator
There was a problem hiding this comment.
do we want to add BarHoverBehavior as an export for consumers?
charts/core/src/Series/Bar/Bar.tsx
Outdated
|
|
||
| /** | ||
| * Hover focus behavior for the series. | ||
| * - `dim_other_bars`: Upon hovering over a bar, all other bars will be dimmed. |
Collaborator
There was a problem hiding this comment.
Suggested change
| * - `dim_other_bars`: Upon hovering over a bar, all other bars will be dimmed. | |
| * - `dim-others`: Upon hovering over a bar, all other bars will be dimmed. |
Collaborator
Author
There was a problem hiding this comment.
sorry! 🫡
| * - `dim_other_bars`: Upon hovering over a bar, all other bars will be dimmed. | ||
| * - `none`: Other bars will not be affected by the hover. | ||
| */ | ||
| hoverBehavior?: BarHoverBehavior; |
Collaborator
There was a problem hiding this comment.
can we add an explicit default that this defaults to BarHoverBehavior.None so it's clearer for consumers?
Collaborator
Author
There was a problem hiding this comment.
that's a very good point, applied.
charts/core/src/Series/Bar/Bar.tsx
Outdated
Comment on lines
15
to
26
| function getEmphasisFocus( | ||
| hoverBehavior?: BarHoverBehavior, | ||
| ): 'series' | 'self' | 'none' | undefined { | ||
| switch (hoverBehavior) { | ||
| case undefined: | ||
| return undefined; | ||
| case BarHoverBehavior.DimOthers: | ||
| return 'self'; | ||
| case BarHoverBehavior.None: | ||
| return 'none'; | ||
| } | ||
| } |
Collaborator
There was a problem hiding this comment.
does this intentionally never provide 'series' as a value?
also, instead of mapping undefined to undefined, I might use case default: return 'none'; since that is the default that echarts uses https://echarts.apache.org/en/option.html#series-bar.emphasis.focus
Collaborator
Author
There was a problem hiding this comment.
It's confusing, I feel you. I shouldn't have added series to the return type.
Specifying return type here seems unnecessary here anyway as compiler can safely infer it, I'll remove it.
The reason why I did not add it to LG is that, I'm onboard with Terrence and Adam's idea of not using all features that EChart provides unless it's demanded by the design team. All changes I made in this PR were asked by the design team, for instance allowing 'none' is what designer has specifically asked for.
Comment on lines
+11
to
+15
| export const AxisPointerType = { | ||
| None: 'none', | ||
| Line: 'line', | ||
| Shadow: 'shadow', | ||
| } as const; |
Collaborator
There was a problem hiding this comment.
Is there a reason we exclude 'cross' as an option?
Collaborator
Author
There was a problem hiding this comment.
The vision LG folks have for chart-component is to only expose those features that are demanded by the design team. We can add this later when it was needed.
Comment on lines
+38
to
+42
| /** | ||
| * Additional CSS class names to apply to the tooltip element. | ||
| * Useful for applying environment-specific styles like dark mode overrides. | ||
| */ | ||
| className?: string; |
Collaborator
There was a problem hiding this comment.
Curious if you can share more about what overrides are required here?
Collaborator
Author
There was a problem hiding this comment.
darkreader-ignore-inline-style class-name is what I intend to use. without it any element with inline style (like chart tooltip) will be injected dark-reader attributes and get assigned dark-reader styles which corrupts the styling of it.
charts/core/src/index.ts
Outdated
| @@ -1,3 +1,4 @@ | |||
| export { XAxis, type XAxisProps, YAxis, type YAxisProps } from './Axis'; | |||
Collaborator
There was a problem hiding this comment.
Could export XAxisType and YAxisType here as well
| }, | ||
| }; | ||
|
|
||
| export const BarWithOnHoverDimOthersBehavior: StoryObj<{ |
Collaborator
There was a problem hiding this comment.
The snapshot for this story will likely look like a duplicate of that of the Bar story. For this story, we should probably do 1 of the following:
- Make it an interaction test ensuring that the snapshot shows what it looks like when a specific datapoint in a series is hovered. Searching for
userEvent.hoverin**/*.stories.tsxfiles should yield some codebase examples. Here are docs as well: https://storybook.js.org/docs/writing-tests/interaction-testing#simulating-behavior-with-userevent - Disable this snapshot. Searching for
disableSnapshotshould yield some codebase examples
Collaborator
Author
There was a problem hiding this comment.
Good call! I was a bit hesitant to write an interaction test for this story because Apache ECharts in its current configuration just draws on a canvas so common ways of finding sub-elements inside it and interacting with them don't work.
But thanks for nudging me to do it, I looked up its official docs and a little bit of LLM help and managed to trigger the highlight effect.
stephl3
reviewed
Nov 6, 2025
.changeset/rotten-parrots-stare.md
Outdated
| - ChartTooltip: Added `className` prop for custom styling | ||
| - Bar: `emphasis` prop now accepts 'self' and 'none' options to control hover focus behavior | ||
| - Axis Types: Added 'category' axis type for discrete data (e.g., bar charts) with properly aligned labels | ||
| - Bug Fix: Fixed null/undefined check in CustomTooltip to properly handle falsy values like 0 and empty strings No newline at end of file |
Collaborator
There was a problem hiding this comment.
I would consolidate this under the ChartTooltip notes since consumers are not aware of CustomTooltip
.changeset/rotten-parrots-stare.md
Outdated
| Chart improvements and refactoring: | ||
| - ChartTooltip: Added `axisPointer` prop supporting 'line', 'shadow', and 'none' options | ||
| - ChartTooltip: Added `className` prop for custom styling | ||
| - Bar: `emphasis` prop now accepts 'self' and 'none' options to control hover focus behavior |
Collaborator
There was a problem hiding this comment.
should update to reflect the consumer API changes
.changeset/rotten-parrots-stare.md
Outdated
| - ChartTooltip: Added `axisPointer` prop supporting 'line', 'shadow', and 'none' options | ||
| - ChartTooltip: Added `className` prop for custom styling | ||
| - Bar: `emphasis` prop now accepts 'self' and 'none' options to control hover focus behavior | ||
| - Axis Types: Added 'category' axis type for discrete data (e.g., bar charts) with properly aligned labels |
Collaborator
There was a problem hiding this comment.
can you add explicit details about how the discriminated union props API works for XAxis / YAxis?
Collaborator
Author
There was a problem hiding this comment.
fair, will do 🫡
Collaborator
Author
|
Thanks Stephen for the second round of feedback! going to bed now 😂😴 hope I covered everything. I'll re-check everything tomorrow morning when I'm fresh. |
stephl3
approved these changes
Nov 7, 2025
charts/core/src/index.ts
Outdated
| export { Bar, type BarProps, Line, type LineProps } from './Series'; | ||
| export { | ||
| Bar, | ||
| type BarHoverBehavior, |
Collaborator
There was a problem hiding this comment.
excluding the type keyword will allow consumers to use this as an enum
Suggested change
| type BarHoverBehavior, | |
| BarHoverBehavior, |
.changeset/rotten-parrots-stare.md
Outdated
Comment on lines
6
to
12
| - ChartTooltip: Added `axisPointer` prop supporting 'line', 'shadow', and 'none' options | ||
| - ChartTooltip: Added `className` prop for custom styling | ||
| - Bar: `hoverBehavior` prop now accepts 'dim-others' and 'none' options to control hover focus behavior | ||
| - XAxis/YAxis: Introduced a new `category` axis type for discrete/categorical datasets (such as for X axes in bar charts). | ||
| - It uses a dedicated axis type definition and a `labels` prop for specifying category names. | ||
| - Existing continuous axis types (`'log'`, `'time'`, `'value'`) remain unchanged, continuing to support `min`, `max`, and `formatter` for customization. | ||
| - Bug Fix: ChartTooltip now renders correctly for values like 0 and empty strings by only checking for null or undefined, not all falsy values No newline at end of file |
Collaborator
There was a problem hiding this comment.
nit
Suggested change
| - ChartTooltip: Added `axisPointer` prop supporting 'line', 'shadow', and 'none' options | |
| - ChartTooltip: Added `className` prop for custom styling | |
| - Bar: `hoverBehavior` prop now accepts 'dim-others' and 'none' options to control hover focus behavior | |
| - XAxis/YAxis: Introduced a new `category` axis type for discrete/categorical datasets (such as for X axes in bar charts). | |
| - It uses a dedicated axis type definition and a `labels` prop for specifying category names. | |
| - Existing continuous axis types (`'log'`, `'time'`, `'value'`) remain unchanged, continuing to support `min`, `max`, and `formatter` for customization. | |
| - Bug Fix: ChartTooltip now renders correctly for values like 0 and empty strings by only checking for null or undefined, not all falsy values | |
| - ChartTooltip | |
| - Added `axisPointer` prop supporting 'line', 'shadow', and 'none' options | |
| - Added `className` prop for custom styling | |
| - Bug Fix: renders correctly for values like 0 and empty strings by only checking for null or undefined, not all falsy values | |
| - Bar: `hoverBehavior` prop now accepts 'dim-others' and 'none' options to control hover focus behavior | |
| - XAxis/YAxis: Introduced a new `category` axis type for discrete/categorical datasets (such as for X axes in bar charts). | |
| - It uses a dedicated axis type definition and a `labels` prop for specifying category names. | |
| - Existing continuous axis types (`'log'`, `'time'`, `'value'`) remain unchanged, continuing to support `min`, `max`, and `formatter` for customization. |
stephl3
reviewed
Nov 7, 2025
charts/core/src/Series/index.ts
Outdated
| @@ -1,3 +1,3 @@ | |||
| export { Bar, type BarProps } from './Bar'; | |||
| export { Bar, type BarHoverBehavior, type BarProps } from './Bar'; | |||
Collaborator
There was a problem hiding this comment.
this should fix build
Suggested change
| export { Bar, type BarHoverBehavior, type BarProps } from './Bar'; | |
| export { Bar, BarHoverBehavior, type BarProps } from './Bar'; |
Contributor
|
Coverage after merging lg_5588_chart_improvements into main will be
Coverage Report
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Collaborator
Author
|
Thanks @TheSonOfThomp and @stephl3 for your feedback and expediting this PR to be shipped. If there's any extra improvement suggestion you have in mind, let me know and I'll apply in a next PR. So far we listed:
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🎫 Ticket
LG-5588
📝 Description
This PR introduces several enhancements to the chart components, focusing on providing more customization options and improving the overall developer experience. The core of this update is a significant refactor of the Axis components, which are now more robust and feature-rich.
✨ New Features & Enhancements
XAxisandYAxiscomponents have been refactored into a unifiedAxiscomponent. This ensures that the axis components are more consistent and easier to maintain.ChartTooltipaxisPointerprop: You can now control the visibility and style of the tooltip's axis pointer. The available options are'line'(default, suitable for continuous axes),'shadow'(suitable for bar charts), and'none'.BarhoverBehaviorprop: A new prop to control the hover focus behavior. Use'dim-others'to dim other bars when hovering over one, or'none'to maintain all bars at full opacity.XAxis&YAxiscategorytype: A newcategoryaxis type has been introduced for discrete data, ensuring that labels align correctly under their corresponding bars in bar charts. Uselabelsprop to customize category labels.darkreader-ignore-inline-styleclass to prevent dark mode browser extensions from interfering with their styles.0and empty string values.🧪 Testing
BarWithOnHoverDimOthersBehavior,BarWithCustomAxisPointer, andBarWithCategoryAxisLabel.