\r\n \r\n \r\n```javascript\r\n // some default values ommited for brevity. you can always see them in 'TsGanttOptions' source code\r\n\r\n useShadowDom = false; // render chart using shadow DOM\r\n\r\n multilineSelection = true; // allow multiple rows to be selected at the same time\r\n useCtrlKeyForMultilineSelection = false; // enable using ctrl key to select multiple rows\r\n\r\n drawTodayLine = true; // draw a vertical line on chart that represents today \r\n highlightRowsDependingOnTaskState = true; // change row text color depending on task state\r\n\r\n separatorWidthPx = 5; // vertical central line width\r\n headerHeightPx = 90; // lower values are not recommended, but you can still try\r\n rowHeightPx = 40; // lower values are not recommended, but you can still try\r\n borderWidthPx = 1;\r\n barStrokeWidthPx = 2;\r\n barMarginPx = 2;\r\n barCornerRadiusPx = 6;\r\n\r\n // special row symbols. you can also use some HTML code\r\n rowSymbols: TsGanttRowSymbols = {childless: \"◆\", collapsed: \"⬘\", expanded: \"⬙\"};\r\n\r\n chartShowProgress = true; // indicating progress percentage on chart bar using different color\r\n chartDisplayMode: \"planned\" | \"actual\" | \"both\";\r\n chartScale: \"day\" | \"week\" | \"month\" | \"year\";\r\n \r\n // optimal spare space on timeline edges in days\r\n chartDateOffsetDays: {[key: string]: number} = {\"day\": 14, \"week\": 60, \"month\": 240, \"year\": 730};\r\n // minimal spare space on timeline edges in days\r\n // chart timeline is redrawn only when trespassing minimal distance to chart edge to nearest bar\r\n chartDateOffsetDaysMin: {[key: string]: number} = {\"day\": 7, \"week\": 30, \"month\": 120, \"year\": 365};\r\n // width of 1 day on timeline. not recommended to use lower values than default\r\n chartDayWidthPx: {[key: string]: number} = {\"day\": 60, \"week\": 20, \"month\": 3, \"year\": 1};\r\n\r\n locale = \"en\"; // default locale\r\n localeDecimalSeparator: {[key: string]: string} = {en: \".\", uk: \",\", ru: \",\", ja: \".\"};\r\n // you can provide any format strings that are supported by dayjs\r\n localeDateFormat: {[key: string]: string} = {en: \"MM/DD/YYYY\", uk: \"DD.MM.YYYY\", ru: \"DD.MM.YYYY\", ja: \"YYYY/MM/DD\"};\r\n localeFirstWeekDay: {[key: string]: number} = {en: 0, uk: 1, ru: 1, ja: 0}; // Sunday is 0\r\n localeDateMonths: {[key: string]: string[]}; // array of 12 string values for each locale. eg [\"January\", \"February\", ...etc] \r\n localeDateDays: {[key: string]: string[]}; // array of 7 string values for each locale. eg [\"Sunday\", \"Monday\", ...etc]\r\n localeDateDaysShort: {[key: string]: string[]}; // array of 7 string values for each locale. eg [\"Su\", \"Mo\", ...etc]\r\n localeDateScale: {[key: string]: string[]}; // array of 3 string values for each locale. eg [\"Weeks\", \"Months\", \"Years\"]\r\n localeDurationFormatters: {[key: string]: (duration: number) => string}; // duration formatter function for each locale\r\n\r\n // Data columns setup.\r\n // there are default 8 columns: \"Name\", \"Progress\", \"Start date planned\", \"End date planned\",\r\n // \"Start date actual\", \"End date actual\", \"Duration planned\", \"Duration actual\".\r\n // You can remove the columns or add your own ones, but you need too make sure to edit all of the following arrays respectively:\r\n // you should provide a width, an alignment, a value getter, and localized headers.\r\n // !!!the length of each column-related array should be equal to the columns count!!!\r\n columnsMinWidthPx: number[]; // array of numeric values, one for each of the columns. 0 to disable column\r\n columnsContentAlign: (\"start\" | \"center\" | \"end\")[]; // array of values, one for each of the columns\r\n // default column value getters return localized values by taking into account all the properties assigned above\r\n // but you can provide your own ones if you need more complex output \r\n // returned value is assigned to cell's innerHTML property. so you can use html tags\r\n columnValueGetters: ((a: TsGanttTask) => string)[]; // array of string value getters for each locale\r\n // column header locales should be provided for all the locales intended for use\r\n localeHeaders: {[key: string]: string[]}; // array of string values for each locale\r\n //\r\n \r\n taskComparer: (taskA: TsGanttTask, taskB: TsGanttTask) => number; // you can provide here your custom task comparer\r\n \r\n enableChartEdit = false; // (experimental) allows making changes to tasks by dragging chart bar handles\r\n // all the task models including the changed ones can be returned to your code using the TsGantt.tasks property getter\r\n```\r\n
\r\n