Range column graph with different index labels

[alexg00]

I have a range column graph and would like to set two different index labels for lower and higher value independenly from actual values. For example values are 10 and 20 but I want to label them “This is low label” and “This is high label”. When I assing indexLabel it just repeats the value for both lower and higher values

[Rohith Nagaral]

@alexg00,

You can use indexLabelFormatter to show custom index labels as shown in the code snippet below.

indexLabelFormatter: function(e){            
    if( e.index === 1)
     return "This is high label";
    else
     return "This is low label";
},

Please check this JSFiddle for an example of the same.

—
Rohith Nagaral
Team CanvasJS

[alexg00]

Great. Thank you. Follow up question.
Is it possible to have different font, direction, color for them

[Rohith Nagaral]

@alexg00

It is not possible to customize both the upper and lower index labels differently, But it is possible to customize both the index labels with the same indexLabelFontFamily and indeLabelFontColor

—
Rohith Nagaral
Team CanvasJS

[alexg00]

Ok. That I think would be a good addition to already excellent graph.
More questions.
1. Is it possible in range area chart to have top and bottome lines in different color?
2. Is it possible to set a different area color between points in the range area chart?
3. Is it possible to set a different chart background color between points in the range area chart?

[Thangaraj Raman]

@alexg00,

1. Is it possible in range area chart to have top and bottome lines in different color?

It is not possible to set different colors for the top and bottom lines of a range area chart as of now. However, you can add a line dataseries with the y-values same as one of the range values in the range area chart to fulfill your requirement. Please take a look at this JSFiddle for a working example on the same.

2. Is it possible to set a different area color between points in the range area chart?

The range area chart can only have one fill color as of now. However, by splitting your datapoints into multiple range area dataseries, you can achieve your requirement. Please take a look at this JSFiddle for a working example on the same.

3. Is it possible to set a different chart background color between points in the range area chart?

Could you please elaborate on what you mean by “set a different chart background color between points” or share a pictorial representation of this requirement so that we can understand your scenario better and help you out with an appropriate solution?

—
Thangaraj Raman
Team CanvasJS

[alexg00]

Thank you. For item 3 we were able to use split lines