Aligning the xAxis of highcharts - javascript

https://jsfiddle.net/hjzeo6u2/
In the above Link I have reproduced an issue where I wanted to align the X-Axis labels just below the respective series plots. As of now both the X-Axes labels are at the bottom of the complete plot of both the series which is not expected.
I have tried with the align property of xAxis in from highcharts api reference https://api.highcharts.com/highcharts/xAxis.labels.align
but could not find the expected solution.
The expected result should be that each X-Axis has to be just below its corresponding plot. Just like a series plot and then its X-Axis after that another series plot and then its X-Axis. Also as and when I resize the Y-Axis using the separator in between the plots,the X-Axis also should reposition itself accordingly.


Would you like to achieve something like this? Demo
chart: {
events: {
render() {
let chart = this,
xAxis = chart.xAxis,
controlLine = chart.yAxis[0].resizer.controlLine;
xAxis[1].axisGroup.translate(0, -xAxis[1].axisGroup.getBBox().y + controlLine.getBBox().y)
xAxis[1].labelGroup.translate(0, -xAxis[1].axisGroup.getBBox().y + controlLine.getBBox().y)
}
}
},

Related

Modify the XAxis label in ReCharts

I have a Recharts Line graph, and the X-Axis has too many data points, and is looking very congested. Following is the current graph:
Is there a way that I can rotate this text to lets say 270° so that all the labels would be visible?

echart Radar chart Axis Label

I am wondering how to show labels only on one axis in echarts like this
some other radar chart
If I do:
axisLabel: {
show: true
}
All the labels from all the axis are shown
Or, is it possible to use polar RadialAxis and AngleAxis and show strait lines instead of round ones between axis. Like this:

Not supported.
Radar has only one axis.
see: https://github.com/apache/incubator-echarts/issues/5467#issuecomment-293513560

I made a workaround if someone stumbles on my question.
I added text graphic and placed it on chart. Like this:

Highcharts: How to combine Column Range and Line Chart?

I basically want to just combine these two charts:
1) Column range: https://www.highcharts.com/demo/columnrange
2) Basic line: https://www.highcharts.com/demo/line-basic
Is this possible, considering that the first chart has a categorical Y-Axis?
I don't need to use categories, I only want the Y-Axis of the line chart. And the lines would be overlaid on top of the horizontal bars.
So both charts would be using the X-Axis time series, but only the line chart would be using the Y-Axis numbers.

You can link both charts into one but you need to remember, that the columnrange chart is inverted and if you want to display line chart exactly like in this example (https://www.highcharts.com/demo/line-basic), you need to swap x values with y values of line series and both axis should have the same scale.
API Reference:
http://api.highcharts.com/highcharts/chart.inverted
Examples:
http://jsfiddle.net/jmmsyv9w/ - not inverted
http://jsfiddle.net/8unrzm1j/ - inverted

draw only grouped multibar chars using nvd3

I draw a multibarChart using nvd3 library and it 's working very well but it gives me two radio buttons to choose wether i want stacked bars or grouped bars.
Can i disable this and make it only show grouped bars?
This is the javascript code :
nv.addGraph(function() {
var chart = nv.models.multiBarChart();
chart.xAxis.tickFormat(d3.format(',f'));
chart.yAxis.tickFormat(d3.format(',.1f'));
var x = data();
d3.select('#chart svg').datum(data()).transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});

The code below will show you bars in a Grouped manner while hiding the controls to the flip between Stacked/Grouped
var chart = nv.models.multiBarChart().stacked(false).showControls(false);
Hope it helps.

Custom highlight to jqPlot stacked bar chart

When adding a custom highlight to the jqPlot chart, I simply use
$('#chart').bind('jqplotDataHighlight', function (ev, sIndex, pIndex, data) {
var chart_top = $('#chart').offset().top,
y = plot1.axes.yaxis.u2p(data[1]); // convert y axis units to pixels
$('#tooltip').css({ top: chart_top + y });
}
as seen in the last example here. This works great on my simple bar chart. I then try the same on a stacked bar chart, and the x-values are off. Does anyone know how I can get these values or what I am doing wrong?

Check out how I do a custom tooltip on my stacked bar chart.
The jsfiddle sample is available here.

Categories