@vx/axis is a part of the vx (now known as visx) collection of low-level visualization components for React. It provides a set of components to create and customize axes for data visualizations, such as charts and graphs. These components are highly customizable and can be used to create both simple and complex axis configurations.
Basic Axis
This code demonstrates how to create a basic bottom axis using the @vx/axis package. The `AxisBottom` component is used along with a linear scale to render the axis.
import { AxisBottom } from '@vx/axis';
import { scaleLinear } from '@vx/scale';
const xScale = scaleLinear({ domain: [0, 100], range: [0, 500] });
<svg width={500} height={50}>
<AxisBottom scale={xScale} top={0} left={0} />
</svg>Custom Tick Format
This code shows how to create a left axis with custom tick formatting. The `tickFormat` prop is used to format the tick values as percentages.
import { AxisLeft } from '@vx/axis';
import { scaleLinear } from '@vx/scale';
const yScale = scaleLinear({ domain: [0, 100], range: [500, 0] });
<svg width={50} height={500}>
<AxisLeft
scale={yScale}
tickFormat={(value) => `${value}%`}
top={0}
left={0}
/>
</svg>Custom Tick Labels
This example demonstrates how to create a top axis with custom tick labels. The `tickLabelProps` prop is used to customize the appearance of the tick labels.
import { AxisTop } from '@vx/axis';
import { scaleBand } from '@vx/scale';
const xScale = scaleBand({ domain: ['A', 'B', 'C'], range: [0, 300] });
<svg width={300} height={50}>
<AxisTop
scale={xScale}
tickLabelProps={() => ({
fill: 'blue',
fontSize: 12,
textAnchor: 'middle'
})}
top={0}
left={0}
/>
</svg>The `d3-axis` package is part of the D3.js library and provides similar functionality for creating and customizing axes in data visualizations. While `d3-axis` is more low-level and requires more manual setup compared to @vx/axis, it offers a high degree of flexibility and is widely used in the data visualization community.
Recharts is a charting library built on React components. It provides higher-level abstractions for creating charts, including built-in axis components. While Recharts is easier to use for common chart types, it may not offer the same level of customization as @vx/axis for more complex visualizations.
Nivo is another React-based charting library that offers a wide range of chart types with built-in axis components. Nivo provides a good balance between ease of use and customization, making it a strong alternative to @vx/axis for many use cases.
An axis component consists of a line with ticks, tick labels, and an axis label that helps viewers interpret your graph.
You can use one of the 4 pre-made axes, or you can create your own based on the <Axis /> element.
Note that the @vx/react-spring package exports an AnimatedAxis variant with animated ticks.
npm install --save @vx/axis
v0.0.199
rangeRound field in the input of scaleLinear(), scaleLog(), scalePoint(), scalePower(), scaleSqrt(), scaleTime() and scaleUtc(). #766
Instead of
scaleLinear({ rangeRound: xxx })
scaleLinear({ range: xxx, round: true });
ticks and tickFormat in the input of scaleQuantize(). It was not really doing anything anyway as both scale.ticks() and scale.tickFormat() do not mutate the scale. #766scale.type field that was attached to the d3 scales. #766@vx/grid components now accept D3 Scale as generic type instead of ScaleInput. Developers should not expect to specify this generic type as it can be inferred from the passed scale. #775GridColumnProps => GridColumnsProps (+s) to match GridRowsProps. #787<Marker /> implementation of a Line and some Text. #783AnyD3Scale, InferD3ScaleOutput, InferD3ScaleDiscreteInput, InferD3ScaleThresholdInput and ScaleInput. Add new utilities functions: getTicks, coerceNumber and toString. #773@vx/legend shapes from the index for convenience / non-deep imports. #772children prop to GridRows + GridColumns to support animated rendering. #787<BarRounded /> shape. #774d3-shape and export as part of vx/shape (arc, area, line, pie, radialLine),
similar to vx/scale has factories for d3-scale. #776SplitLinePath component to @vx/shape that allows you to create a line path split into multiple smaller line paths that can be styled independently. #778vx/scale and vx/axis. More fields passed to child render props of Axis. #773Axis is refactored to accept a ticksComponent which allows us to animate them. #779values to tickFormat(value, index, values) so that format logic can more easily leverage all ticks (because numTicks is approximate, lib consumers do not know how many tick values exist a priori). #779<Marker /> that matches actual SVG <marker>. #783<MarkerArrow />, <MarkerCross />, <MarkerX />, <MarkerCircle />, <MarkerLine />. #783@vx/react-spring that includes react-spring as a peerDep and can be a home for things that depend on react-spring. #779<AnimatedAxis /> and <AnimatedTicksRender /> in @vx/react-spring. #779vx-demo/axis demo to use <AnimatedAxis />. #779AnimatedGridRows + AnimatedGridColumns. #787AnimatedTicks/useAnimatedTicksConfig to spring-configs/useAnimatedLineTransitionConfig so it can power both animated tick + grid lines. #787animationTrajectory=outside | inside | min | max to AnimatedAxis and AnimatedGridRows/Columns. #787enableDebounceLeadingCall prop being passed into div. #763vx/scale package has 100% test coverage. #766<Marker>. #783/axis demo to include AnimatedGrid* and a animationTrajectory config. #787 - @vx/annotation: 0.0.198 => 0.0.199
- @vx/axis: 0.0.198 => 0.0.199
- @vx/bounds: 0.0.198 => 0.0.199
- @vx/brush: 0.0.198 => 0.0.199
- @vx/chord: 0.0.198 => 0.0.199
- @vx/clip-path: 0.0.198 => 0.0.199
- @vx/curve: 0.0.198 => 0.0.199
- @vx/demo: 0.0.198 => 0.0.199
- @vx/drag: 0.0.198 => 0.0.199
- @vx/event: 0.0.198 => 0.0.199
- @vx/geo: 0.0.198 => 0.0.199
- @vx/glyph: 0.0.198 => 0.0.199
- @vx/gradient: 0.0.198 => 0.0.199
- @vx/grid: 0.0.198 => 0.0.199
- @vx/group: 0.0.198 => 0.0.199
- @vx/heatmap: 0.0.198 => 0.0.199
- @vx/hierarchy: 0.0.198 => 0.0.199
- @vx/legend: 0.0.198 => 0.0.199
- @vx/marker: 0.0.198 => 0.0.199
- @vx/mock-data: 0.0.198 => 0.0.199
- @vx/network: 0.0.198 => 0.0.199
- @vx/pattern: 0.0.198 => 0.0.199
- @vx/point: 0.0.198 => 0.0.199
- @vx/react-spring: 0.0.198 => 0.0.199
- @vx/responsive: 0.0.198 => 0.0.199
- @vx/scale: 0.0.198 => 0.0.199
- @vx/shape: 0.0.198 => 0.0.199
- @vx/stats: 0.0.198 => 0.0.199
- @vx/text: 0.0.198 => 0.0.199
- @vx/threshold: 0.0.198 => 0.0.199
- @vx/tooltip: 0.0.198 => 0.0.199
- @vx/voronoi: 0.0.198 => 0.0.199
- @vx/vx: 0.0.198 => 0.0.199
- @vx/xychart: 0.0.0 => 0.0.199 (private)
- @vx/zoom: 0.0.198 => 0.0.199
FAQs
vx axis
We found that @vx/axis demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Popular npm packages like eslint-config-prettier were compromised after a phishing attack stole a maintainer’s token, spreading malicious updates.
Security News
/Research
A phishing attack targeted developers using a typosquatted npm domain (npnjs.com) to steal credentials via fake login pages - watch out for similar scams.
Security News
Knip hits 500 releases with v5.62.0, refining TypeScript config detection and updating plugins as monthly npm downloads approach 12M.