CODEWITHSUNDEEP
highcharts
Alain P
Alain P

Reputation: 1343

Highcharts custom formatting/coloring of category labels

I need to be able to apply background coloring (and text coloring to maintain contrast) to category labels.

I couldn't find an easy way to set each category label independently and came up with a working solution but now the width of my label column is too wide and applying marginLeft doesn't work.

First is there an easier way to achieve what I want or a solution to the width.

Here's the result: enter image description here

and fiddle can be found here

    Highcharts.ganttChart('container', {

  chart: {
//  marginLeft: 400,
    events: {
      load: function() {
        for (var tickPos in this.yAxis[0].ticks) {
          console.log(tickPos);
          var ch = this.yAxis[0].chart;
          var tick = this.yAxis[0].ticks[tickPos];
          var label = tick.label;
          if (typeof label !== "undefined") {
            var text = label.textStr;
            var obj = JSON.parse(text);
            var element = label.element;
            element.textContent = obj.name;
            if (typeof obj.background !== "undefined") {
              element.style["background-color"] = obj.background;
            }
            if (typeof obj.color !== "undefined") {
              element.style["color"] = obj.color;
            }
          }
        }
      }
    }
  },
  title: {
    text: 'Highcharts Gantt Chart'
  },

  subtitle: {
    text: 'With linked to split'
  },

  xAxis: {
    minPadding: 0.05,
    maxPadding: 0.05
  },
  "yAxis": [{
    "scrollbar": {
      "enabled": true
    },
    labels: {
      useHTML: true
    },
    "uniqueNames": true
  }],
  tooltip: {
    outside: true
  },
  rangeSelector: {
    enabled: true,
    selected: 5
  },
  time: {
    useUTC: true
  },
  plotOptions: {
    column: {
      grouping: true
    }
  },

  "series": [{
    "name": "main",
    "tooltip": {
      "headerFormat": null
    },
    "data": [{
      "name": '{"name": "Color prep and printing", "background":"green", "color":"white"}',
      "id": "_dqbcsMWXEeeTdKTuQU2hRA",
      "start": 1577836800000,
      "end": 1582934400000,

      "color": {
        "patternIndex": 0
      }
    }, {
      "name": '{"name": "Send to color house", "background":"blue", "color":"white"}',
      "id": "_dqkmv8WXEeeTdKTuQU2hRA",
      "parent": "_dqbcsMWXEeeTdKTuQU2hRA",
      "start": 1577836800000,
      "end": 1580428800000,
      "duration": 30
    }, {
      "name": '{"name": "Generate proofs", "background":"teal", "color":"white"}',
      "id": "_dq3hkMWXEeeTdKTuQU2hRA",
      "parent": "_dqbcsMWXEeeTdKTuQU2hRA",
      "start": 1578614400000,
      "end": 1579651200000,
      "duration": 12,
      "dependency": [{
        "to": "_dqkmv8WXEeeTdKTuQU2hRA"
      }]
    }, {
      "name": '{"name": "Print and ship", "background":"crimson"}',
      "id": "_drLDlcWXEeeTdKTuQU2hRA",
      "parent": "_dqbcsMWXEeeTdKTuQU2hRA",
      "start": 1581292800000,
      "end": 1582934400000,
      "duration": 19,
      "dependency": [{
        "to": "_dq3hkMWXEeeTdKTuQU2hRA"
      }]
    }],
    "dataLabels": [{}, {
      "enabled": true,
      "align": "right",
      "format": "{point.duration}"
    }]
  }],
});

Upvotes: 0

Views: 418

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

To increase the width, you can set width style:

yAxis: {
    labels: {
        useHTML: true,
        style: {
            width: '300px',
            textOverflow: 'ellipsis'
        }
    },
    ...
},

Live demo: https://jsfiddle.net/BlackLabel/nkz9xmh0/

API Reference: https://api.highcharts.com/gantt/yAxis.labels.style

Upvotes: 1

Related Questions