I've created a column chart which has a mass of data (approximately 300+ entries) and I seem to be getting a visual banding as a result of the data being incorrectly spaced.
I've tried the following plotOptions setting:
plotOptions: {
column: {
pointInterval: 0,
pointPadding: 0,
pointPlacement: 'between',
pointRange: 0,
groupPadding: 0
}
}
Reading the API, I was under the impression pointPadding being set to 0 would resolve the issue however I am still seeing that very slight padding on every 7th data point.
Depending on your screen size, you can see the issue here in my fiddle: http://jsfiddle.net/neilff/WcLSg/4/
Is there a way to explicitly state how far each column should be spaced?
Yes, you have set pointPadding, but then you have set pointWidth which will overwrite pointPadding. Simply disable pointWidth, see: http://jsfiddle.net/WcLSg/5/
Related
I'm using Highcharts 6.1.1 with react-highcharts 16.0.0. When I create a 'column' style chart with 30 series or less, the data points with matching x-values all are arranged side by side:
But, if i add another series, bringing the total to 31, Highcharts no longer groups the columns side by side, and instead renders them all in the same place, not stacked, just overlapping:
I can't seem to find a setting in highcharts config to change this grouping threshold, and have experimented quite a bit with setting paddings and widths and such to try to maximize the number of columns it will show side by side, but i can never get it to work with more than 30 series.
When you are using the boost module, columns are always one pixel wide. Additionally, a lot of functionality (such as grouping, which causes this problem) is disabled when the boost module works.
Here: https://github.com/highcharts/highcharts/issues/6600, you have very well explained the assumptions of this module.
To work around, you can use decimal x values:
series: [{
data: [1]
}, {
data: [2, 2]
}, {
data: [{
x: 0.3,
y: 1
}]
}, {
data: [2]
}, ... ]
Live demo: http://jsfiddle.net/BlackLabel/8bq9yL4f/
The problem was in the boost part of the config:
config = {
boost: {
enabled: true,
useGPUTranslations: true,
seriesThreshold: 30
},
}
So I can up that seriesThreshold or just disable boost for this case to solve the problem. Though I would like to know if there's a way to get the boost rendering to correctly show the columns side by side.
In a Highcharts column chart with a lot of data points, say one per day for a full year the columns are too wide in my opinion. How to give them a width of e.g. 1 pixel? I unsuccessfully tried this:
plotOptions: {
series: {
pointWidth: 1
}
},
Here's a jsfiddle.
Simply get rid of the border by setting borderWidth to 0. Take a look at corrected example below.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.column.borderWidth
Example:
http://jsfiddle.net/sLmj0z5z/
You have more series data so labes pointWidth: 1 is fine otherwise we have to delete series data or use like this
Highcharts API
chart: {
zoomType: 'x',
width:525
},
Highcharts and stockcharts, they both provide the options to add some padding at the x axis in order to avoid drawing some values on the edge of the plot area (left or right).
According to the doc this is archived by employing the minPadding and maxPadding members of the xAxis property of the configuration object used for constructing the chart... but in practice this is not working for stockcharts. So i wonder how i can achieve this... i leave you with the examples...
var examples
Working example for highcharts
Not Working example for stockcharts
P.D: Using property min for setting the lowest x value also isn't working.
The maxPadding is applied when you not call the setExtremes() method. In the Highstock, we call the setExtremes to set the range on the navigator, as a result padding is ignored.
To achieve your goal, you can define the tickLength parameter and set x param per labels.
yAxis: {
tickWidth: 1,
tickLength: 50,
labels:{
x: 50
}
},
Example:
http://jsfiddle.net/b6a42kz0/
OP Note: See the comments for updated answer.
It looks like pointPlacement is not working with a single column...
The point placement can also be numeric, where 0 is on the axis value,
-0.5 is between this value and the previous, and 0.5 is between this value and the next. Unlike the textual options, numeric point
placement options won't affect axis padding.
Like in the example below where i removed this data it doesn't work anymore:
{
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140],
pointPadding: 0.4,
pointPlacement: -0.2
},{
name: 'Profit',
color: 'rgba(248,161,63,1)',
data: [183.6],
pointPadding: .3,
pointPlacement: 0.2,
yAxis: 1
}
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-pointplacement-numeric/
This jsfiddle shows the usual pointplacement option. If you adjust this fiddle and remove 2 of the 3 data-sets, the pointplacement option is broken, while even in that case it should still be usefull to have and working, even required in my case...
edit
I added this into a fiddle because the only one responding so far didn't get the point from the code example. So here it is: http://jsfiddle.net/dargno/3YMyq/
If anyone knows a possible solution without having to "hack" the source code i'd really appreciate it.
I was able to get rid of this issue myself in my particular instance by adding a negative margin to the graph area, and adding an extra (empty) data point.
chart: {
type: 'column',
marginRight: -400
And
series: [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150,0],
Keep in mind the tooltips might get "lost" if you're not carefull that way though.
An example can be found at http://jsfiddle.net/dargno/wtaaH/
While this is not a proper solution, it certainly circumvents the bug for the time being.
It looks like possibly bug, so I reported to our developers here https://github.com/highslide-software/highcharts.com/issues/2308
I want to create a graph with four quadrants using flot. I need to have labels on both the left and right-hand sides of the graph - with the same ticks. Here is my code:
$.plot($("#placeholder"), [ [<%=points%>] ], { series: {lines: { show: false },
points: { show: true }},
yaxes: [{ ticks:[[0,"Left"]],max: 100, min:-100 },
{ position: "Right",ticks:[[0,"Right"]], max:100, min: -100 }],
xaxis: { ticks:[[0,"Bottom"]], max: 100, min:-100 } });
I get the "Left" and "Bottom" labels but nothing on the right-hand side. Thanks in advance for any help you can provide.
I had this same issue. In order to have the secondary y-axis appear on the right side of the plot, you need to have a series connected to it, but that lies outside your displayed data range:
{label:"dummy data",data:[[-1000,-100],[-1000,100]], yaxis:2} //yaxis array is indexed from 1
Since your range appears to be fixed, matching the ticks is pretty straighforward. My range and ticks was highly dynamic, so I got the ticks to match by including a complete duplicate series of my primary data hooked to the secondary yaxis. I just shifted it on the xaxis to be completely out of range for display.
Yes, this is wasteful, since it involves delivering extra data. But until Flot supports showing yaxes without series conencted, this will get it done.