Develop Reference

Highcharts display scrollbar when zooming

Zooming with a zoomType of 'x' in a Highcharts chart, seems to only crop the data area between given coordinate stops. Is there a way to zoom in and still have all data available through scrolling?
{
chart: {
borderWidth: 0,
zoomType: "x",
scrollablePlotArea: {
scrollPositionX: 1,
minWidth: 1057
}
}
}
https://jsfiddle.net/OysteinAmundsen/4x7yzu68/3/
The fiddle above is set to a minimum width of 1057px, while the max-width of the container is 800px. This forces a horizontal scrollbar. If you zoom in on the data, notice that the available scrolling area does not change. This means that the data is not zoomed, it is cropped and stretched to fill the area.
I know there are events I can hook on to - the redraw event seems a likely candidate. Perhaps I can adjust the minWidth and cancel the crop-zoom, or is there a config I'm missing wihch whould do what I want?

The simplest solution is to use scrollbar feature from Highstock:
scrollbar: {
enabled: true
}
Live demo: https://jsfiddle.net/BlackLabel/be5wvg9q/
API Reference: https://api.highcharts.com/highstock/scrollbar

Reduce space between ticks in horizontal bar-chart chartJS

I am using the horizontal bar chart from chartjs. Right now my Chart seems to be very big, and the space between the ticks on the xAxis is very high. ( I attached picture of that), can anyone tell me how to reduce this space and scale the chart in total better?
My css properties:
#myChart {
width: 90% !important;
height: 100% !important;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
padding-bottom: 5%;
}
My chart options:
modelChart = new Chart(ctx, {
type: 'horizontalBar',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
suggestedMin: 0,
fontSize: 18
}
}],
xAxes: [{
ticks: {
autoSkip: false,
fontSize: 18,
beginAtZero: true
}
}]
},
legend: {
display: false
},
tooltips: {
footerFontSize: 22,
bodyFontSize: 22,
titleFontSize: 18
},
hover: {
animationDuration: 0
}
}
});

If you post your corresponding HTML then I can confirm this, but is #myChart the id of your canvas element or of a div that contains your canvas element?
Chart.js will render the chart such that it fully fills the parent of the canvas element. Even if you set a width property on a canvas element it will still not affect the chart size.
Checkout this codepen example that demonstrates the difference. At the top is a chart contained by a div whose width is set to 40%. At the bottom is the same chart but the canvas element's width is set to 40%. Notice that the second chart still fills the entire window.
So long story short, you should wrap your canvas element in a div and set the div's desired size accordingly to actually change the size of your chart.
Now, let me address your question about changing the space between ticks in your X axis. There is not really a way to truly do this like I think you are wanting to do, because chart.js determines the tick placement by dividing the width of the chart by the number of tick steps (e.g. it always uses the full width of the chart equally).
So one way to decrease the space between ticks is to simply add more ticks (by changing the tick stepSize using the stepSize and fixedStepSize properties). Obviously, in this case, the chart size has not changed. You are just showing more ticks, so the space between them has decreased.
If you want to truly change the distance between ticks, then the only way is to decrease the width of the chart. But by default, the height of the chart will decrease along with the width because the maintainAspectRatio property is defaulted to true.
So if you want a narrower chart (but still want the chart to be large) then I would advise you to set the maintainAspectRatio property to false and manually set the height and width of your chart's parent div.
Checkout this codepen that gives an example of each of the tick spacing concepts that I discussed.
The first chart is the baseline, the second chart adds more ticks (thus decreasing the tick spacing), and the third chart changes the aspect ratio so the chart is still large but narrower (therefore the distance between ticks is reduced).

Try using chartArea: {width: '30%'}. Adjust percentage as per requirement. It will compress the width of the chart. Just a thought !!!! I used in horizontal bar graphs to adjust my graph size.

Plot line is hiding behind trend in highcharts and movement of plotline is become very hindrance when loaded with very large data sets

Hi all I am using high stock to visualise my data. In that plot line is hiding behind the trend.is there is any way to show the plot line above the trend. and also movement of plot line become hindrance when the chart is loaded with large data sets.
I have attached image for reference. Here plot line is hiding behind the trend.

You should use the zIndex option of plotLines to solve this problem.
yAxis: {
plotLines: [{
color: '#FF0000',
width: 2,
value: 80,
zIndex: 5
}]
}
You can see the live example in this jsFiddle.

Left-align y-axis title with labels in Highcharts

In Highcharts, I'd like to put the y-axis title at the top and have it left-aligned with the y-axis labels.
I've tried this:
$('#container').highcharts({
...
yAxis: {
...
title: {
align: 'high',
text: 'Y-axis title',
rotation: 0,
y: -10,
//To left-align title with labels
textAlign: 'left', //This is undocumented, but appears to work
margin: 0
}
}
})
However, I get an excessive left margin which seems to be proportional to the length of the y-axis title.
JsFiddle
It looks like the margin calculation doesn't take into account the textAlign: 'left' setting.
UPDATE: I should say that my current "solution" is to set a margin with chart.marginLeft but that's not ideal because it's fixed. The left margin should be just big enough to accommodate the axis labels (however big they might be).
How can I left-align the y-axis title with the labels and have a reasonable left margin?

I decided to use marginLeft (yes, you read that correctly), but based on the length of your axis label, to provide the needed flexibility.
What I did here is set your chart options to a variable called chartOptions. I then calculated the length (number of characters) of the axis title, set the marginLeft property based on that value, and then drew the chart with the amended chart options.
chartOptions.chart.marginLeft = chartOptions.yAxis.title.text.length;
var chart = $('#container').highcharts(chartOptions);
Here's the working fiddle: http://jsfiddle.net/brightmatrix/6eeuay58/9/
I tested it with different numbers by increasing some of your data points.
Please let me know if this is useful and helpful for you.

Overlapping bars with JQPlot

I am creating a chart with JQPlot. The chart will contain several series, each series with two bars. The second bar of each series should be partly covered by the first bar. I tried to achieve this goal by setting barPadding to a negative value:
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
varyBarColor: false,
fillToZero: true,
barPadding: -5, // number of pixels between adjacent bars in the same group (same category or bin).
barDirection: 'vertical', // vertical or horizontal.
barWidth: 20, // width of the bars. null to calculate automatically.
shadowOffset: 0 // offset from the bar edge to stroke the shadow.
},
},
This indeed makes the bars overlapping but the second bar overlaps the first one.
I would like it vice versa.
Is this possible with JQPlot or does anyone know another library with this possibility?

There is no such configuration in jqplot. However there is a hacky way to do it by setting the z-index.
$('#chart .jqplot-series-canvas:first').css( "z-index", 99999);
Demo