Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
90
Labels and custom axis
posted

Hi,

I'm drawing a graph that currently looks something like this:

and that  would like to look like this one:

More precisely, i would like to:

- present the xAxys labels with a vertical orientation, and to select the exact vertical/horizontal points where to present the labels.

- instead of hiding the majorStroke lines i would like to select the exact points where to draw the lines

The code i use to draw it is something like this:

$('#anaResEvolChart').igDataChart({
width: "700px",
height: "400px",
dataSource: ds.datasource,
axes: [{
name: "xAxis",
type: "numericX",
formatLabel: function (value) { return GetFullFormatDate(new Date(value)); },
majorStroke: 'rgba(0,0,0,0)'
//labelLocation: 'insideTop'
}, {
name: "yAxis",
type: "numericY",
majorStroke: 'rgba(0,0,0,0)'
}],
series: [{
name: node.Code,
title: node.Name,
type: "scatterLine",
xAxis: "xAxis",
yAxis: "yAxis",
xMemberPath: "XValue",
yMemberPath: "value" + i,
showTooltip: true,
tooltipTemplate: "anaResEvol_tooltipTemplate",
markerType: 'square',
thickness: 5,
brush: _anaResChartColorsRGB[node.ColorId]
},{
name: node.Code,
title: node.Name,
type: "scatterLine",
xAxis: "xAxis",
yAxis: "yAxis",
xMemberPath: "XValue",
yMemberPath: "value" + i,
showTooltip: true,
tooltipTemplate: "anaResEvol_tooltipTemplate",
markerType: 'square',
thickness: 5,
brush: _anaResChartColorsRGB[node.ColorId]
}],
horizontalZoomable: true,
verticalZoomable: true,
windowResponse: "immediate"
});

I noticed the crossingAxis/crossingValue/labelSettings sub-properties of the axis property, but didn't found any documentation on them, so any help would be greatly appreciated.

Thanks in advance,

Joel Campos

Parents
  • 30692
    Verified Answer
    Offline posted

    Joel,

    To turn the labels 90 degrees you should: 

    1. increase the space reserved for the x axis labels, by setting labelExtent to some number (e.g. labelExtent: 80)
    2. set an angle on the labels by setting labelAngle: 90 (or labelAngle: -90)

    This will achieve the rotated effect. As far as choosing exactly the values to display tickmarks at though, the chart core supports this through a functionality called custom tickmarks, but this is currently not exposed to the jQuery version of the chart. I would suggest making a feature request so that we can properly prioritize that on the backlog. Unfortunately I'm not sure there is an easy work around to achieve this without that customization feature.

    if you set crossingAxis to another axis name in the chart and set crossing value equal to the value on that axis at which the axis should cross, and then set the axisLocation of the axis to an inside location, you can float an axis line and its labels over the chart surface rather than them being docked on the outside. If you are interested in this I can show you an example.

    -Graham

Reply Children