I have a jqplot chart with 8 series. 7 of these are normalized in such a way that they look great with the default yaxis. The last series, however, needs to utilize a secondary yaxis. There are a ton of examples on utilizing a dual yaxis presentation when there are only two series.
So my question: Can you assign a specific series to a specific axis? If so, how?
Thanks in advance!
Ok -- I ended up finding an example in the api docs, where previously I was searching through the examples.
{
series:[
{color: '#ff4466', lineWidth: 5, label:'good line'},
{yaxis: 'y2axis', shadow: false, label:'bad line'}
]
}
The yaxis option is available per series, which allows a specific series to be assigned to a specific yaxis.
I hope this helps someone else.
Related
I want to create a boxplot chart with zones using Highcharts. It seems that highchart uses the high value as threshold.
Does anyone know if it is possible to change that to use the median for example ?
See https://stackblitz.com/edit/highcharts-boxplot-zones
Thanks !
Well, the chart renders exactly as you instruct it.
760, 801, 848, 895, 1265
If you want a different chart you would change the variables. In each case, the chart is rendering boxplots according to your data.
It is not officially supported, but you can set zoneAxis for example to 'median':
series: [{
data: [ // low, q1, median, q3, high
...
],
...,
zoneAxis: 'median'
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5001/
API Reference: https://api.highcharts.com/highcharts/series.boxplot.zoneAxis
I´m setting up a preview for a graph, and I want to know if highcharts has any option for reducing the number of points showed in a series. I have points everyday in 5 years, and I would like to reduce for a simple preview. Is this possible?
You can reduce the number of points by your own function, but I think that the best solution will be to use provided by Highstock dataGrouping feature:
series: [{
dataGrouping: {
enabled: true
},
data: [...]
}]
Live demo: http://jsfiddle.net/BlackLabel/3ky0s2oh/
API Reference: https://api.highcharts.com/highstock/plotOptions.series.dataGrouping.enabled
Docs: https://www.highcharts.com/docs/stock/data-grouping
I've been trying to add some custom yAxis labels to highcharts but I've not been able to so far. I've tried using formatter from a predefined array of strings and I've tried addAxis method but that doesn't get me the results I'm looking for.
Basically I have some numbers (lets say 4 and 4000) and I want to have these as my yLabels. However, I do NOT want the giant space between them. They need to be one right after the other and in ascending order. I cannot figure out how to do this leaving them as integers and I cannot figure out how to dynamically add them to highcharts as strings. I'm not even sure if this is possible
Any help would be greatly appreciated.
Here is the Y-axis label formatter documentation from Highcharts you're probably looking for. I wrote this fiddle to simulate the custom y-axis functionality you were wanting, although I'm not sure how you want to map those values to the x-axis data. This should give you a good starting point.
Code for reference:
$('#container').highcharts({
yAxis: {
categories: ['4', '4000', 'Foobar'],
labels: {
formatter: function () {
return this.value;
}
}
},
series: [{
data: [0, 1, 2]
}]
});
This stackoverflow question may also help although I noticed some dead links.
I have a Line chart done with dygraphs, all the data is added using a Datatable so It has a variable number of series and data points.
All I want to do is to specify each series color. I know I can use an array in the constructor like this.
colors:
["#7FFF00", "#00FFFF", "#008080", "#00BFFF", "#FFD700", "#FF69B42", "#20B2AA",
"#FF0000", "#FFFF00", "#FF1493", "#000080", "#00FF00", "#6B8E23", "#00FA9A",
"#B0C4DE", "#F0E68C", "#DAA520"]
,
But as I said before the number of series is variable and unknown. I know I can update the options of a specific series like this:
g.updateOptions({
'S1001': {
strokeWidth: 10,
drawPoints: true,
pointSize: 4,
highlightCircleSize: 6,
}
});
Where S1001 is the name of the series, but I cant find any option to change its color.
How can I specify a series color if I know its Series ID?
Thanks in advance,
Pablo
EDIT: Well I found a workaround that works quite well. I can change
the colour of a series by setting the value in the "colorsMap_" and
then redrawing the graph so:
g.colorsMap_["SeriesID"] = "#FFFFFF";
g.updateOptions("Any option so the graph is redrawn");
Is there any way of redrawing or refreshing the graph that not
includes calling updateOptions?
thanks!
I came here while trying to solve this exact problem so I am adding a more up to date answer in the hope it helps someone else.
As of Dygraphs 2.0 (which contains breaking changes) it is possible to format individual series.
You can set in your options the following:
{
series: {
mySeriesName: {
color: "green", //Accepts CSS colour values.
//There are other properties you can set too:
strokeWidth: 3,
drawPoints: true,
pointSize: 5,
highlightCircleSize: 7
}
}
}
Replace 'mySeriesName' with the name given to a series in your CSV file or labels array.
You can try reading the documentation about series options but I don't personally find it all that clear. This demo was more helpful to me.
Maybe too late in answering but #pablito is correct that there should be an options of directly changing the color using updateOptions. Currently, this feature is not supported so we have to live with hacks. If we use the hack
g.colorsMap_["SeriesID"] = "#FFFFFF";
g.updateOptions({});
as suggested above, it works but the problem is that Dygraph does not remember the changes once you zoom in or out. To make Dygraph remember the changes, implement the following
g.colorsMap_["SeriesID"] = "#FFFFFF";
g.updateOptions({});
g.user_attrs_.colors[index] = "#FFFFFF"; // Where index is index number of the SeriesID
Dygraph.updateDeep(g.user_attrs_, g.user_attrs_);
You should define a greater number of colours than you have series in the initial constructor: extra entries beyond the number of series are ignored. later, when you add series, the extra colours will be used. Obviously, you will need to decide on some maximum number of series you want to handle.
I have a graph (http://jsfiddle.net/CfVZP/12/) with several series where the y-axis data is on two different scales. I'm using the yaxis for one scale and the y2axis for the other. I'd like to be able to display the legend for the series using the yaxis on the left side of the graph (location: 'nw') and the legends for the series using the y2axis on the right side (location: 'ne'). Is there a way to set different legend properties for different series?
Something like:
{series: [
showMarker: true,
color: "#00FF00",
legend: { // This doesn't actually work.
location: 'ne', // I'm looking for a substitute
} // for this functionality.
],
// Additional series with different legend locations
}
It doesn't seem possible to do this using the standard legend options (I tried playing with the position and the EnhancedLegendRenderere column options), but I was wondering if there is a different plugin that might be able to make this happen, or some other option that can be altered to cause the same result.
I'm not sure if this is going to be possible. Looking at the jqplot source code, each plot holds only a single Legend object - for this to work you would most likely need it to hold an array of them.
Is there a particular reason you would like to do this? It would be a little unusual to have a plot with multiple legends. Would it not suffice to have a single legend but give each series a good, descriptive name?