Customization

Customization

The surf-charts library provides the ability to customize any part of the charts. Below is an example of customization of VerticalChart component from the library.

This block is only necessary to understand the general concept of customization, for full information go to the specific chart page.

Either way, all components provide ample opportunities for customization, allowing you to easily adapt them to your needs. The main parameters and customization options for VerticalChart are listed below.

Component props

Example of usage

import { VerticalChart } from '@surf/charts';
 
const data = [
  { label: 'January', value: 120 },
  { label: 'February', value: 80 },
  { label: 'March', value: 150 },
  { label: 'April', value: 110 },
  { label: 'May', value: 140 }
];
 
<VerticalChart
  label='Sales'
  tooltipPostfix='K'
  maxBars={5}
  data={data}
  styling={{
    labelClass: 'text-lg font-bold text-green-500',
    beforeClass: 'before:bg-bar-hover'
  }}
/>;

Result

Styling elements

The styling prop in the surf-charts components provides granular control over the appearance of various chart elements. Below is a breakdown of how you can utilize these properties to fine-tune the visual presentation of your charts.

labelClass

This controls the styling of the label text at the top of the chart. You can apply any TailwindCSS classes or custom CSS classes to adjust the font size, color, weight and other text properties.

Example

<VerticalChart
  label='Monthly Sales'
  styling={{
    labelClass: 'text-xl font-semibold text-blue-700'
  }}
/>

beforeClass

This property allows you to apply styles to the before pseudo-element of the bars in the chart. This is useful for adding decorative effect, such as background colors or gradients, before the main bar content.

<VerticalChart
  data={data}
  styling={{
    beforeClass: 'before:bg-gradient-to-r before:from-pink-400 before:to-red-600'
  }}
/>

tooltipClass

Customizes the appearance of tooltips that appear when hovering over the bars. This can include text formatting, background colors, borders and more.

<VerticalChart
  data={data}
  styling={{
    tooltipClass: 'bg-black text-white p-2 rounded-lg shadow-lg'
  }}
/>

barClass

Customizes the appearance of each bar on the chart. This can include background colors, borders and more.

<VerticalChart
  data={data}
  styling={{
    barClass: 'bg-black p-2 h-8'
  }}
/>

titleClass

Customizes the appearance each title of the bar on chart. This can include text formatting and more.

<VerticalChart
  data={data}
  styling={{
    titleClass: 'text-green-500 text-lg font-semibold'
  }}
/>

valuesLineOuter, valuesLineInner and valuesLineLabels

Customizes the appearance of the values line and it's label. You can change font, paddings and so on. If you want to completely hide this line you can add display: none; via class to the valuesLineOuter.

<VerticalChart
  data={data}
  styling={{
    valuesLineOuter: 'pr-4';
    valuesLineInner: 'shrink';
    valuesLineLabels: 'font-semibold max-w-24';
  }}
/>

gridWrapper and gridLine

Customizes the appearance and layout of the value lines grid.

<VerticalChart
  data={data}
  styling={{
    gridWrapper: 'visible'
  }}
/>

Result

Additional customization options

The surf-charts library offers powerful customization capabilities that allow you to create highly tailored visualizations. By leveraging the styling prop alongside other component props, you can adapt the appearance of your charts to fit your unique design needs.

For more specific customization details or advanced usage patterns, refer to the documentation of each individual component within the surf-charts library.

Advanced example

import { VerticalChart } from '@surf/charts';
 
const salesData = [
  { label: 'June', value: 90 },
  { label: 'July', value: 130 },
  { label: 'August', value: 100 },
  { label: 'September', value: 115 },
  { label: 'October', value: 125 }
];
 
<VerticalChart
  label='Quarterly Sales'
  tooltipPostfix='K'
  colorScheme='light'
  maxBars={4}
  sort='asc'
  noDataContent='Sales data is unavailable'
  noLabelContent='No Sales Label'
  className='shadow-md rounded-lg border border-gray-300'
  data={salesData}
  styling={{
    labelClass: 'text-2xl font-bold text-gray-800 mb-4',
    beforeClass: 'before:bg-blue-500 before:opacity-75',
    tooltipClass: 'bg-gray-900 text-white p-2 rounded-lg',
    barClass: 'h-8 border border-white',
    titleClass: 'font-semibold'
  }}
/>;