Charts

Properties

export type Charts = {
  colors?: CSSProperties['color'][];
  title?: ViewText;
  subject?: ViewText;
  iconColor?: CSSProperties['fill'];
  labels?: ChartLabels;
  grid?: ChartGrid;
  axis?: ChartAxis;
  threshold?: Threshold;
};
 
export type ChartLabels = {
  color?: CSSProperties['color'];
  fontWeight?: CSSProperties['fontWeight'];
  fontSize?: CSSProperties['fontSize'];
};
 
export type ChartGrid = {
  stroke: CSSProperties['stroke'];
};
 
export type ChartAxis = {
  stroke: CSSProperties['stroke'];
};
 
export type Pie = {
  cornerRadius?: number;
  segmentGap?: number;
  hole?: boolean;
};
 
export type BarChart = {
  cornerRadius?: number;
};
export type SingleStat = {
  deltaStyle?: 'text' | 'pill';
};
export type Threshold = {
  stroke: CSSProperties['stroke'];
};

Chart Colors

Our charting library generates a color palette derived from the primary colors you specify. For instance, if you provide only white and black, the library will create a spectrum of gray shades to accommodate charts requiring more than two colors. This ensures each chart element is distinguishable, regardless of the number of data points.

For specific color assignments on elements, such as lines in a chart or segments, conditional formatting is available through the dashboard's UI. This feature allows for precise color customization based on data values or categories, ensuring that charts adhere to desired visual themes.

The dashboard dynamically selects colors that best fit the number of metrics to be displayed. If the number of colors you provide matches or exceeds the number of metrics, those colors will be used directly. However, if more colors are needed, our system generates additional shades to ensure a diverse and visually coherent palette. This approach facilitates a balanced and aesthetically pleasing color distribution across all chart elements, making complex data easier to understand at a glance.

From version 0.11.0 of the dashboard, this can be updated through the following property:

  theme={{ charts: { colors: ["red", "blue", "green"] } }}