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
},
Related
When I create a stockchart, I noticed by accident that highcharts seems to show or create points that do not actually exist in the data set.
Here is an jsfiddle that illustrates this:
( See added comment for the link, unable to just paste it because of idiotic rules on stackoverflow )
As you can see by hovering over the chart to show the tooltip, some of the data will show as having more than 2 decimals. In the data set there are no such data. All data has a maximum of 2 decimals.
Of course I can do Highcharts.numberFormat(this.y, 2) but to me this highlights a bigger problem since I am interested in the actual reported datapoint, and not approximations.
Is there a way to tell highcharts not to do this?
I've tried to use type:'spline' to show data points as illustrated here:
http://www.highcharts.com/demo/spline-irregular-time
But couldn't get spline and stockchart to coexist. I would like a stockchart but with actual points dotted or similar.
Data is grouped. You can disable data grouping by setting:
plotOptions: {
series: {
dataGrouping: {
enabled: false
}
}
},
Example: http://jsfiddle.net/3Ld2zmum/17/
Markers can be enabled using:
plotOptions: {
series: {
marker: {
enabled: true
},
Example: http://jsfiddle.net/3Ld2zmum/18/
I have a chart of type spline, that shows a discrete curve.
Some of datapoints of this chart are very far each other, some other are very close.
I would like to use dataGrouping options to group automatically the points that are very close.
The objective is to aggregate the close points (for example I would like to show the average per week, now the points are per day) so they do not appear too close each other.
So I setted dataGrouping up in this way
plotOptions: {
spline: {
dataGrouping: {
approximation: 'average',
forced:false,
units: [
['week', [1]]
],
enabled: true
},
},
...
}
but it does not work.
What is wrong in this setting?
The datagrouping doesnt reconigse if some points are close or not. The idea of working is group points per units, like "create single point based on 5". You can try also to use ordinal parameter with false value.
I found that dataGrouping is appliable only to HighStock charts.
I was using highcharts instead of highstock.
Changed to highstock, no it works
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.
i wonder if it's possible to draw confidence intervals like in this graph:
(source: tonarchiv.ch)
I.e. an interval for each sample and a point or small line in the "middle".
X-axis should just be a number (number of rating).
Columnrange is the answer! See: http://jsfiddle.net/dmN3N/18/
series: [{
type: 'columnrange',
data: [
[-0.547571175, 0.401498266],
[-0.960011899, 0.444655955],
...
]
}, {
type: 'scatter',
data: [-0.073036455, -0.257677972,
0.100955985, 0.106734365,
-0.12219027, -0.060577832
]
}]
If required, the dashes at each end of a column (see sample pic) could be generated with other (wider than tall) column ranges...
Here is an example rantanplan's suggestion of using columnranges for the dashes at the top and bottom of each bar:
The horizontal lines are created using 'columns' which are 15 pixels wide and 2 pixels tall, positioned at both ends of the data range. For example, here are the lines at the top of each bar:
type: 'columnrange',
pointWidth: 15,
minPointLength: 2,
data: [
[0.40, 0.40],
[0.30, 0.30]
]
Another series creates the lines at the bottom, and a third additional series (scatter) creates the diamond marker in the middle.
https://jsfiddle.net/ecjohbg1/4/
You can try to use plotBands: http://api.highcharts.com/highcharts#xAxis.plotBands
There is now a series type called 'errorbar' which fits this use case perfectly. While the other solutions glue together three different series for the intervals, the errorbar series does it all with one. A separate series is still needed for the mean.
Here is an example
https://www.highcharts.com/docs/chart-and-series-types/error-bar-series
Here is the API reference https://api.highcharts.com/highcharts/series.errorbar
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.