Home Forums Chart Support Axis tick label multiple colors

Axis tick label multiple colors

Viewing 2 posts - 1 through 2 (of 2 total)
  • #32848

    I have a requirement where I need to have multiple colors for the Y-Axis label or multiple custom images I can use besides the label.
    Please let me know if this is possible and how can I do this?



    It is not possible to set multiple colors for axis labels or place an image beside labels as of now. However, you can use stripLines to set multiple colors for y-axis labels. To achieve this, you need to first hide all the axisY labels using labelFormatter and store the labels in an object as shown in the code snippet.

    axisY: {
      labelFormatter: function(e) {
        if(axisYLabels[e.value] === undefined) {
          axisYLabels[e.value] = e.value;
        return "";

    After rendering the chart, you can iterate through the labels object stored above and add stripLines for each label value with different labelFontColor using addTo method. Please refer to the code snippet below for the same.

    var i = 0;
    for(var label in axisYLabels) {
      if (axisYLabels.hasOwnProperty(label)) {
        chart.axisY[0].addTo("stripLines", { value: label, label: label, labelPlacement: "outside", labelBackgroundColor: "white", color: "transparent", labelFontColor: axisLabelColors[i%axisLabelColors.length] });

    Please take a look at this JSFiddle for an example.

    Setting color of individual axisY label using stripLines

    Manoj Mohan
    Team CanvasJS

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.