I have a chart like the one in this fiddle: http://jsfiddle.net/h9Bqj/
As shown in the image there is no tick for "3" and "5" on the xAxis as well as no label. I am not able to figure out how to show a tick for every xAxis.
The [...]
xAxis: {
labels: {
step: 1
},
tickInterval: 1
}
options did not work for me.
How would I get a tick and a label for every increment?
Set tickInterval as 1, as you have, and add pointInterval as 1.
http://api.highcharts.com/highcharts#plotOptions.series.pointInterval
http://jsfiddle.net/h9Bqj/1/
Actually I figured it out by myself.
Setting pointRange via plotOptions: {
column: {
stacking: 'normal',
pointRange: 1
}
}, in the options or in the series does the trick.
See: http://jsfiddle.net/DZbyp/1/
Related
I am trying to get y axis to show up in highchart
I can use x-axis plotline to simulate the result, but it has the x-axis protruding over the y-axis
xAxis: {
type: 'datetime',
tickLength: 0,
plotLines: [{
color: '#000000',
width: 1,
value: 1370131200000
}]
},
Note: 1370131200000 is the lowest x value in my series.
Can someone let me know how do I define y-axis properly?
Use yAxis.lineWidth property. By default it equals to 0 and that's why the line is not visible.
API reference:
http://api.highcharts.com/highcharts/yAxis.lineWidth
I have a Highstock graph with Plotlines here: http://jsfiddle.net/qd0rmazg/3/
I'd like to be able to have a legend of Plotlines where, similar to the legend of Series, upon a click Plotlines of a certain category can be made visible or hidden.
In my JSfiddle example, there are 2 categories of Plotlines. Is it possible to toggle the visibility of Plotlines per one category? I couldn't seem to find anything supporting this.
This is how I've created the Plotlines:
xAxis: {
plotLines: [{
value: Date.UTC(2016, 12, 29), // year, month, day
width: 1,
color: 'blue',
dashStyle: 'ShortDash',
label: {
text: 'Category 1',
},
}, {
value: Date.UTC(2016, 11, 12), // year, month, day
width: 1,
color: 'green',
dashStyle: 'Solid',
label: {
text: 'Category 2',
}]
}
As far as I know, there is no native HC legend for the plot lines. But, you can create your custom legend element on the page and use HC capabilities to show/hide plot lines as in their examples:
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/axis-addplotline/
chart.xAxis[0].removePlotLine('plot-line-1');
chart.xAxis[0].addPlotLine({
....
id: 'plot-line-1'
});
As noted in my comment, there is a feature request here:
https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/3009547-plotlines-on-legend
Please add your votes and comments.
Vladimir M provided a good solution to show/hide the plot lines with your own custom legend.
The other common approach is to use a line series as your plotLine, which gives you the benefit of the full series functionality.
Example series:
{
name: 'PlotLine',
type: 'line',
color: 'rgba(204,0,0,1)',
data: [25,25,25,25,25,25,25,25,25,25]
}
Fiddle:
http://jsfiddle.net/jlbriggs/nh65m306/
If you need a vertical plot line, the data set up is slightly more complex but still quite feasible.
{{EDIT to demo vertical plot line:
First, you;d have to set a min/max for you y axis (could be done programmatically on chart load):
yAxis: {
min: 0,
max: 75,
maxPadding: 0
}
Then, you specify your data in [x,y] pairs, with the x values being your plotLine value, and the y values being your Y axis min and max:
data: [[4,0], [4,75]]
Updated fiddle:
http://jsfiddle.net/jlbriggs/nh65m306/1/
With that method, you could add a series per plot line, or, if you want all of them to be the same legend and settings, you can add multiple by inserting null points between your desired lines:
data: [[4,0], [4,75], [5,null], [7,0],[7,75]]
Fiddle:
http://jsfiddle.net/jlbriggs/nh65m306/2/
Is it possible to customize the y-axis of my highchart so that every series will start from 100% and not as it is by default from 0% ?
Here is an example for better understanding:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/compare/
Here is the js code for showing the percentages in the y-axis:
plotOptions: {
series: {
compare: 'percent'
}
},
To simply reverse the y-axis, you could use
yAxis: {
reversed: true,
},
http://www.highcharts.com/stock/demo/yaxis-reversed
If you're instead trying to display data starting from 100% and upwards, you could set the minimum value to be 100, like this:
yAxis: {
min: 100
},
http://api.highcharts.com/highstock#yAxis.min
I am trying to create a fiddle, mocking up the image attached
in following jsfiddle
http://jsfiddle.net/2TuCW/162/
The problem is I want the plotLines between blue line and green column.
I tried changing the zIndexes of plotLines (10) , between blue line (15) and green column (5) in following fiddle
http://jsfiddle.net/2TuCW/163/
//plotLines zIndex
"plotLines" : [
{
"color": '#E5E7EB',
"zIndex": 10,
"width": 2,
"value": 20
},
....
....
//Series data z-index
"series": [{
"type":"column",
"data": [35,39,49,50,57,58],
"zIndex":5
....
....
"series": [{
"type":"line",
"data": [35,39,49,50,57,58],
"zIndex":15
But it is not working as expected. Please suggest how to achieve it.
It is related with fact that all series have the same zIndex.
Related topic: https://github.com/highslide-software/highcharts.com/issues/3321
Try to adjust the values of the plotLines.
If you want a plot line to be between blue line and green column the value of the plotLines has to be between the data of blue line and data of column.
Unfortunately, it seems that plotLines can either be in front of all series or behind all series. This is because all series are grouped under a common element. A plotLine element is a sibling to the group element, not a sibling to the individual series elements.
This issue relates to the fact that all series are drawn within the same group, and therefore have the same z-index related to other groups. A related GitHub issue has discussion and code examples.
See this one example solution, proposed by Torstein Hønsi (Highcharts creator). I've made a modified, minimal, reproducible example here:
/**
* Plugin to allow plot band Z indexes in between series
*/
Highcharts.wrap(Highcharts.PlotLineOrBand.prototype, 'render', function (proceed) {
var chart = this.axis.chart;
proceed.call(this);
if (!chart.seriesGroup) {
chart.seriesGroup = chart.renderer.g('series-group')
.attr({ zIndex: 3 })
.add();
}
if (this.svgElem.parentGroup !== chart.seriesGroup) {
this.svgElem
.attr({ zIndex: this.options.zIndex })
.add(chart.seriesGroup);
}
return this;
});
Highcharts.chart('container', {
xAxis: {
plotLines: [{
color: 'red',
width: 2,
value: 3.5,
zIndex: 10
}]
},
series: [{
data: [7988, 12169, 15112, 22452, 34400, 34227],
zIndex: 9
}, {
data: [8105, 11248, 8989, 11816, 18274, 18111],
zIndex: 11
}]
});
The code uses Torsteins plugin to allow the plotline in between series. See the GitHub issues for discussion on caveats and potential improvements.
This fiddle uses multiple series and displays an axis for each of them. Is it possible to use a single series to make several Axes? http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/combo-multi-axes/
xAxis:[{
categories:setup.x_mixed,
maxZoom:5,
minPadding: 0.2,
labels:{
"enabled":setup.categories_label,
"y":1,
"style":{
"fontSize":13,
"color":"#999",
fontFamily:"'helvetica neue',helvetica",
whiteSpace:"nowrap",
textOverflow:"clip",
width:"100%",
marginTop:legendSpacing
},
formatter:function () {
return this.value.split("|")[0]
}
},
lineColor:"rgba(255,255,255,0)",
tickWidth:0,
offset:0
}, { // Secondary yAxis
categories:setup.x_mixed,
maxZoom:5,
minPadding: 0.2,
labels:{
"enabled":setup.categories_label,
"y":16,
"style":{
"fontSize":13,
"color":"#999",
fontFamily:"'helvetica neue',helvetica",
whiteSpace:"nowrap",
textOverflow:"clip",
width:"100%",
marginTop:legendSpacing
},
formatter:function () {
return this.value.split("|")[1]
}
},
lineColor:"rgba(255,255,255,0)",
tickWidth:0,
offset:0
}],
You can also use linkedTo paramtetr on extra axis http://api.highcharts.com/highcharts#yAxis.linkedTo
its pretty simple,
declare 2 xAxis same like the yAxis you mentioned in the example with one of them as
opposite:true
As you have only one series set the second axis extremes same as the first one using getExtremes() and setExtremes(), as shown in this fiddle here http://jsfiddle.net/W43Zb/
Hope this will help you