Dynamic Gridlines on Highcharts - javascript

The problem: Enable vertical or horizontal gridlines on a bar or column chart. My current implementation is not dynamic enough. Applying vertical gridline on column chart works fine but if you change the chart type to bar then its incorrect.
How do I make these vertical and horizontal gridlines adapt to the chart type?
jsfiddle:
http://jsfiddle.net/4vG42/819/#

In a highcharts bar graph the xAxis is displayed vertically, and in a column graph the xAxis is displayed horizontally. Which means that you have to set gridlines to 1 and 0 in the xAxis and yAxis based on this. For example:
//For a column graph
chart_type = 'column'
xAxisGridLines = 0
yAxisGridLines = 1
//For a bar graph
chart_type = 'bar'
xAxisGridLines = 0
yAxisGridLines = 1
Here is a live example where I set the gridlines based on the chart type: https://jsfiddle.net/ewolden/5kft9rva, press the button to toggle between bar and column graph.

Related

Aligning the xAxis of highcharts

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)
}
}
},

PlotlyJS rescale yaxis when xaxis range is updated (via rangeslider)

I have the sample chart with range slider created with PlotlyJS:
It uses API endpoint to fetch data. Now, the slider can be used to change xaxis range like:
but then the chart looks strange as yaxis has this fixed range and visible data covers only small vertical part of the whole chart.
Is it possible to scale (change range of) yaxis when xaxis range is updated?
I tried listening to plotly_replot event and then rescaling yaxis, but really couldn't make it work properly.

Set Highcharts column chart in a middle of yAxis?

i have Highcharts chart and i want to add column chart in a middle of yAxis, like that:
Is any way to do that using highcharts?

Increase spacing between legend and -chartartJs

I have a bar chart where I have drawn 3 vertical lines, each with it's own label at the top. I would like those labels to be above the top of the y-axis (above the 30% line in the example) but below the legend. I can't figure out how to increase the space between the top legend and the chart such that I can have my vertical line labels (15, 24 & 33) be off of the chart itself but below the legend. Any ideas?
I assume you are using chart.js. If yes, you can use custom HTML legends and apply style rules to them. Start your chart with the normal legends hidden and apply the generateLegend() method to a custom div.
var customChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
legend: {
//Because you are going to show your own legend
display: false
}
}
});
//insert legend to any div of your liking and manipulate via CSS
document.getElementById("custom-legend").innerHTML = customChart.generateLegend()
Documentation: http://www.chartjs.org/docs/latest/configuration/legend.html#html-legends
Fiddle example: https://jsfiddle.net/gmyy3rf5/

Highchart Column hides in the middle of Highchart Scroll bar

I am using highstock for scrollbar in highcharts. It is working fine, but when I move scroll forward first of last column of chart hides from chart window. I want to show minimum 3 columns at any point of time. I have used min : 0 and max : 2 in chart configuration.
Here is fiddle for the issue jsfiddle
If category is not full in visible area then column will not be visible either.
If you want to show minimum 3 columns at any time then you could increase max by 1.
Example: http://jsfiddle.net/dum6m6mq/7/
xAxis : {
min : 0,
max : 3,
...

Categories