Complex Labels Example

<Svg style="width:600px; height:600px;">
    <Chart offset="20 -20 -40 120" axes={{
      y: {
          type: CategoryAxis,
          vertical: true,
          inverted: true,
          labelLineHeight: 1.3,
          onCreateLabelFormatter: () => (formattedValue, value) => {
              let parts = formattedValue.split(';');
              return [{ text: parts[0], style: { fontWeight: 600 }}, { text: parts[1]}];
          }
      },
      x: {
          type: TimeAxis,
          snapToTicks: 0,
          format: "datetime;MMMyyyy",
          labelLineHeight: 1.3,
          onCreateLabelFormatter: () => (formattedValue, value) => {
              let parts = formattedValue.split(' ');
              let result = [{ text: parts[0] }];
              let color = parts[0] == 'Jan' ? 'red' : null;
              if (parts[0] == 'Jan') result.push({ text: parts[1], style: { fontWeight: 600, color }});
              return result;
          }
      }
  }}>
       <Repeater records-bind="$page.points" recordAlias="$point" sorters-bind="$page.sorters">
          <Bar colorIndex={3}
               style="stroke:none;opacity:0.3"
               x0-bind="$point.start"
               x-expr="{$point.start} + {$point.duration}"
               y-bind="$point.city"
               size={0.5}
          />
       </Repeater>
       <Gridlines/>
    </Chart>
 </Svg>