Skip to main content

​
Overview

The options property contains chart type-specific settings. Different options are available depending on which chart type you’re using. 
const config: GraphConfig = {
  type: 'line',
  options: {
    isSmoothLine: true,
    showPoints: true,
  },
};

​
Line chart options

​
Smooth lines

​
isSmoothLine
boolean
default:"false"
Whether to use smooth (curved) lines for line charts. When true, lines are drawn with curves. When false, lines are straight between data points.
const config: GraphConfig = {
  type: 'line',
  options: {
    isSmoothLine: true,
  },
};

​
Line thickness

​
lineThickness
number | 'auto'
default:"auto"
Line thickness in pixels. Set to 'auto' to automatically determine the appropriate thickness based on chart size, or provide a specific pixel value.
const config: GraphConfig = {
  type: 'line',
  options: {
    lineThickness: 3, // 3px thick lines
  },
};

​
Show points

​
showPoints
boolean
default:"false"
Whether to show data point markers on the line. Useful for emphasising individual data points or when you have sparse data.
const config: GraphConfig = {
  type: 'line',
  options: {
    showPoints: true,
  },
};

​
Missing values

​
missingValues
'gap' | 'connect' | 'zero'
default:"gap"
How to handle missing values (nulls) in line charts: - 'gap' - Break the line where values are missing - 'connect'
  • Connect the line across missing values - 'zero' - Treat missing values as zero
const config: GraphConfig = {
  type: 'line',
  data: {
    columns: [
      { key: 'month', label: 'Month' },
      { key: 'sales', label: 'Sales' },
    ],
    rows: [
      { month: 'Jan', sales: 100 },
      { month: 'Feb', sales: null }, // Missing data
      { month: 'Mar', sales: 150 },
    ],
  },
  options: {
    missingValues: 'connect', // Draw line across the gap
  },
};

​
Bar and column chart options

​
Sort bars

​
sortBars
boolean
default:"false"
Whether to sort bars in descending order by value. Only applies to categorical bar and column charts with a single series.
const config: GraphConfig = {
  type: 'bar',
  options: {
    sortBars: true, // Sort from highest to lowest
  },
};

​
Scatter plot options

​
Point size

​
pointSize
number | 'auto'
default:"auto"
Custom point size for scatter plots in pixels. Set to 'auto' to automatically determine the appropriate size, or provide a specific pixel value.
const config: GraphConfig = {
  type: 'scatter',
  options: {
    pointSize: 8, // 8px diameter points
  },
};

​
Combo chart options

​
Combo type

​
comboType
'grouped-bars' | 'stacked-bars' | 'lines'
default:"grouped-bars"
Determines the type of combo plot to show: - 'grouped-bars' - Display series as grouped bars alongside each other - 'stacked-bars' - Stack series bars on top of each other - 'lines' - Display series as lines
const config: GraphConfig = {
  type: 'combo',
  options: {
    comboType: 'lines', // Show all series as lines
  },
};

​
Pie and donut chart options

​
Pie total position

​
pieTotalPosition
'center' | 'outside'
default:"outside"
Where to show the sum of all values in a pie or donut chart: - 'center' - Show the total in the center of the chart (particularly useful for donut charts) - 'outside' - Show the total outside the chart area
const config: GraphConfig = {
  type: 'donut',
  options: {
    pieTotalPosition: 'center', // Show total in donut center
  },
};

​
Combining options

You can combine multiple options for the same chart type: 
const config: GraphConfig = {
  type: 'line',
  options: {
    isSmoothLine: true,
    showPoints: true,
    lineThickness: 2,
    missingValues: 'connect',
  },
};
Options that don’t apply to your current chart type are ignored. For example, setting isSmoothLine on a bar chart has no effect.