DataViz charts visually represent data to effectively communicate information and patterns. There are multiple charts availables like Bar, Grouped Bar, Stacked Bar and Line. Use these charts to represent complex data in a visual format.
You can control whether to show legends, grid, tooltip, change the format of the tick labels, and change the position of the legend.
You can also customize the colors of the bars and lines.
The charts are all reponsive and adapts to the screen size seemlessly.
import React from "react"
import {
BarChart
} from "@asphalt-react/data-viz"
const data = [
{
date: "2012-05-13",
"New York": "65.3",
"San Francisco": "52.0",
Austin: "72.4",
},
{
date: "2012-05-14",
"New York": "64.2",
"San Francisco": "56.0",
Austin: "72.5",
}
]
export const BasicBarChart = ({ ...props }) => {
return (
<div style={{ width: "100%", height: "400px" }}>
<BarChart data={data} dataKey="date" />
</div>
)
}
There are multiple types of data visualization components. You can use any of them as per your use-case.
- BarChart
- LineChart
All the charts stretches to fit its container, but has a minimum width set to "312px".
Bar chart which can display multiple data series, grouped, stack or side by side. Also supports both vertical and horizontal layout.
Bar chart data.
Example:
[
{
month: "Jan",
customers: 4350,
attrition: 120
},
{
month: "Feb",
customers: 6600,
attrition: 220
}
]
To enhance the user experience, limit the number of bars to 20. In case of grouped, limit the sets to 8.
type | required | default |
---|---|---|
arrayOf | true | N/A |
Colors of individual bars in a grouped or stack bar chart. Use this prop to override the default set of colors. Accepts an object with the key mapped to the key of the bar, and the value mapped to the color value.
For instance:
const data = [
{
month: "Jan",
customers: 4350,
attrition: 120
},
{
month: "Feb",
customers: 6600,
attrition: 220
}
]
const colors = { customers: "#497aaa", attrition: "#666666" }
type | required | default |
---|---|---|
object | false | N/A |
Key of the datum to index the data.
For instance:
const data = [
{
month: "Jan",
customers: 4350,
attrition: 120
},
{
month: "Feb",
customers: 6600,
attrition: 220
}
]
Use "month" as the dataKey
. This plots the "month" on x-axis, whereas in case of horizontal
bar charts, plots the data on y-axis.
type | required | default |
---|---|---|
string | true | N/A |
Label for X-axis.
type | required | default |
---|---|---|
string | false | N/A |
Label for Y-axis.
type | required | default |
---|---|---|
string | false | N/A |
Show grid lines.
type | required | default |
---|---|---|
bool | false | false |
Show chart legend.
type | required | default |
---|---|---|
bool | false | true |
Position the legends at the top.
type | required | default |
---|---|---|
bool | false | false |
Formats the default x-axis tick label.
tickLabel - tick label value. return value should be string|number.
For instance:
(tickLabel) => {
// return the formatted label
}
type | required | default |
---|---|---|
func | false | N/A |
Formats the default y-axis tick label.
tickLabel - tick label value. return value should be "string|number".
For instance:
(tickLabel) => {
// return the formatted label
}
type | required | default |
---|---|---|
func | false | N/A |
React node to pass your own tooltip.
type | required | default |
---|---|---|
node | false | null |
Show tooltip.
type | required | default |
---|---|---|
bool | false | true |
Returns the value of the bar on mouse hover.
- event - browser event.
- currentData - the current data on which the mouse is hovering.
- groupData - the entire group which the current data is part of.
(event, { currentData, groupData }) => {}
type | required | default |
---|---|---|
func | false | N/A |
Enable horizontal view.
type | required | default |
---|---|---|
bool | false | false |
Enable stack view.
type | required | default |
---|---|---|
bool | false | false |
These display data points connected by straight lines. They are commonly used to show trends over time.
Line chart data.
Example:
[
{
month: "Jan",
customers: 4350,
attrition: 120
},
{
month: "Feb",
customers: 6600,
attrition: 220
}
]
- To enhance the user experience, limit the number of lines to 20.
type | required | default |
---|---|---|
arrayOf | true | N/A |
Colors of individual lines. Use this prop to override the default set of colors. Accepts an object with the key mapped to the key of the point, and the value mapped to the color value.
For instance:
const data = [
{
month: "Jan",
customers: 4350,
attrition: 120
},
{
month: "Feb",
customers: 6600,
attrition: 220
}
]
const colors = { customers: "#497aaa", attrition: "#666666" }
type | required | default |
---|---|---|
object | false | N/A |
Key of the datum to index the data.
For instance:
const data = [
{
month: "Jan",
customers: 4350,
attrition: 120
},
{
month: "Feb",
customers: 6600,
attrition: 220
}
]
Use "month" as the dataKey
. This plots the "month" on x-axis.
type | required | default |
---|---|---|
string | true | N/A |
Label for X-axis.
type | required | default |
---|---|---|
string | false | N/A |
Label for Y-axis.
type | required | default |
---|---|---|
string | false | N/A |
Show grid lines.
type | required | default |
---|---|---|
bool | false | false |
Show chart legend.
type | required | default |
---|---|---|
bool | false | true |
Position the legends at the top.
type | required | default |
---|---|---|
bool | false | false |
Formats the default x-axis tick label.
tickLabel - tick label value. return value should be "string|number".
For instance:
(tickLabel) => new Date(tickLabel)
type | required | default |
---|---|---|
func | false | N/A |
Formats the default y-axis tick label.
tickLabel - tick label value. return value should be "string|number".
For instance:
(tickLabel) => new Date(tickLabel)
type | required | default |
---|---|---|
func | false | N/A |
React node to pass your own tooltip.
type | required | default |
---|---|---|
node | false | null |
Show tooltip.
type | required | default |
---|---|---|
bool | false | true |
Returns the value of the point(s) on mouse hover.
- event - browser event.
- currentData - the current data on which the mouse is hovering.
- groupData - the entire group which the current data is part of.
(event, { currentData, groupData }) => {}
type | required | default |
---|---|---|
func | false | N/A |
Show data points(circles) on the lines.
type | required | default |
---|---|---|
bool | false | false |
Starts from 0 in y-axis. Else, takes the minimum value available.
type | required | default |
---|---|---|
bool | false | false |