Skip to main content

Adding cell borders to the chart

To show all lines in the grid (horizontal and vertical), set the borders value of the cellBorders to "full". To hide horizontal lines, set the value to "columns". If you set it to "", lines will be hidden.

Example:

<script setup>
import { getData, simpleColumns } from "./common/data";
import { Gantt } from "@svar-ui/vue-gantt";
import { ref } from "vue";

const data = getData();

const cellBorders = ref("full");
</script>

<template>
<Gantt
:cellBorders="cellBorders"
:tasks="data.tasks" />
</template>

Related sample: Chart cell borders