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.
Related
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
},
I want to represent two time series with Highcharts. My problem is that one has large values and the other one low values. When I plot them together, the one with low values appear as a straight line. I want to be able to plot them with two different scales, but find it impossible to do it. I put what I already have here on a jsfiddle, and the code is here:
$(function() {
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1,
inputEnabled: $('#container').width() > 300,
enabled:1
},
chart:{type:'line'},
series: [
{name: 'serie with high values',
color: 'red',
data: [1000,2000,3000,4000]
},
{name: 'serie with low values',
color: 'green',
data: [0.1,0.2,0.3,0.4,0.5]
},
],
legend: {
enabled:true,
},
})
});
I would appreciate if someone could point me how I could give a different scale to each time series - ideally, I will want to plot more than two, each of them having its own scale.
You can use to yAxis, like in the example
yAxis:[{
},{
opposite:true
}],
http://jsfiddle.net/S2uyp/1/
As the difference between high values and low values is very high so the chart is looking like this but if you try with the following values then you will see that the chart looks good
$(function() {
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1,
inputEnabled: $('#container').width() > 300,
enabled:1
},
chart:{type:'line'},
series: [
{name: 'serie with high values',
color: 'red',
data: [10,15,30,40]
},
{name: 'serie with low values',
color: 'green',
data: [0.1,1,5,10]
}],
legend: {
enabled:true
}
})
});
this is exactly what you want I guess.
Since you have an answer telling you how to accomplish specifically what you asked, let me add one that addresses the issue more fundamentally.
This is a classic example of when what you really need is two separate charts (generally, aligned vertically one above the other works best for line charts, where they can work with a common time axis).
That's a concept that seems to shock some people, but it really is the best solution, and there really is no negative aspect to having two charts instead of one.
The problem with plotting 2 series on one chart, with 2 different scales, is that it practically forces the user to make comparisons that are not real. When you plot 2 lines on a chart, the interaction of those 2 lines is generally something of importance, and will be seen as such by the viewer.
When the 2 lines have 2 different scales, the interaction is completely meaningless, and the two lines serve only to clutter the chart and obscure the message of the data.
Essentially, when you plot 2 series with 2 separate scales, you are making 2 charts already anyway - but you're scrunching them into one space where they get in each others way.
FWIW
{{UPDATE:
As an example, here is a fairly typical example of 2 series plotted on separate scales on the same chart:
http://jsfiddle.net/jlbriggs/GYbRY/
It could be cleaned up and improved a bit, but overall it's going to be a bit of a mess no matter what you do to it.
Here is the same data plotted on 2 separate charts, in significantly less space than the original:
http://jsfiddle.net/jlbriggs/m64Ys/
I feel it's hard to support the argument that the first example makes it easier to compare the variation in the two series.
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
Is it possible to specify a separate offset value for each of the slices of a pie chart? I am using ShieldUI JavaScript chart, but as per the documentation I only see this possibility of setting it up:
seriesSettings: {
pie: {
activeSettings: {
pointSelectedState: {
enabled: true
}
},
enablePointSelection: true,
slicedOffset: 20,
addToLegend: true,
dataPointText: {
enabled: true,
borderRadius: 4,
borderWidth: 2,
borderColor: "red"
}
}
},
There isn’t :
slicedOffset[0]: 10,
slicedOffset[1]: 20,
slicedOffset[2]: 30,
and so on. How can I achieve the desired behavior?
It is not possible to specify different offsets for each slice of a Shield UI JavaScript pie chart. The slicedOffset applies for all of the slices of a given chart. However there are some workarounds depending on what exactly you need to be accomplished.
If the chart is related to another one you may specify a predefined parameter and assign its value to the slicedOffset property. However it will again apply for all the slices.
It is also possible, using the events of the chart to recreate it, after a slice has been clicked on. In this case an additional parameter will be specified, which to take account of which slice has been clicked on so that this slice’s property can be set to true :
sliced: true
If the different sliced offsets values are quite important you may also wish to use related controls: for instance a drop down. In this case, avoiding the shortcomings of the previous two solutions selecting an item from the dropdown you will recreate the chart and set different offset for the selected slice.
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.