Styling

HyVue Gantt provides extensive styling options to customize the appearance of your Gantt chart. This guide covers all styling aspects from basic colors to advanced customizations.

Color Schemes

Built-in color schemes are available:

<g-gantt-chart :color-scheme="'vue'" />

// Available schemes:
const schemes = [
  'default',
  'creamy',
  'crimson',
  'dark',
  'flare',
  'fuchsia',
  'grove',
  'material-blue',
  'sky',
  'slumber',
  'vue'
];

You can also pass a custom ColorScheme object. The gridAndBorder field controls the grid lines and internal separators and, since v5.3.0, also the chart's outer border and the commands-bar top border. Set it to transparent to remove the outer frame (it falls back to #eaeaea when omitted):

<g-gantt-chart
  :color-scheme="{
    /* ...other colors... */
    gridAndBorder: 'transparent' // no outer border / no commands-bar separator
  }"
/>

Custom Bar Styling

Individual bars can be styled:

const bar = {
  ganttBarConfig: {
    id: '1',
    style: {
      background: 'linear-gradient(to right, #42b883, #35495e)',
      borderRadius: '4px',
      boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
      color: '#ffffff',
      fontWeight: 'bold'
    }
  }
};

Layout Customization

Control the chart's layout:

<g-gantt-chart
  :row-height="40"
  :label-column-width="'200px'"
  :font="'Arial, sans-serif'"
  :grid="true"
>

Each guide includes practical examples and best practices for implementation. The content is structured to progress from basic concepts to advanced features, maintaining a professional and educational tone throughout.