I have created a combined line/timeline chart in this jsfiddle:
// arbitrary code snippet required by stackoverflow editor:
xAxis: [{
type: 'datetime'
}, {
type: 'linear'
}],
I would prefer the events to be positioned below the analog value grid rather than as currently, in the middle of it.
Is there any way to achieve this? Thanks in advance!
I can suggest two solutions:
add a second yAxis and set heights for both y-axes:
yAxis: [{
height: '50%'
}, {
height: '50%',
top: '50%'
}],
Demo: http://jsfiddle.net/BlackLabel/e0zhmyr7/
API: https://api.highcharts.com/highcharts/yAxis.height
change the y values for x-range series in the current implementation
Demo: http://jsfiddle.net/BlackLabel/ow1357tq/
Related
I have developed the Highcharts label as much as possible but not able to format as required
https://jsfiddle.net/5ug4wpbz/1/
Please tell me how to format the date and time as shown in the image attached with this.
Expected :
https://ibb.co/WV638L4
You can not use category and datetime axis type together, these are two mutually exclusive values. However, you can achieve the wanted result by using one of them.
For category axis type set pointPlacement to 'between' and xAxis.labels.align to 'left':
xAxis: {
categories: [...],
labels: {
align: 'left'
}
},
series: [{
pointPlacement: 'between',
data: [...]
}]
Live demo: https://jsfiddle.net/BlackLabel/fnsuxt90/
For datetime axis type, you need to use x and y data values or set pointStart and pointInterval properties:
xAxis: {
type: 'datetime'
},
series: [{
pointStart: 1563040800,
pointInterval: 1000 * 60 * 30,
data: [...]
}]
Live demo: https://jsfiddle.net/BlackLabel/f1c59a0w/
API Reference:
https://api.highcharts.com/highcharts/series.line.label
https://api.highcharts.com/highcharts/series.line.pointPlacement
https://api.highcharts.com/highcharts/series.line.type
EDIT:
To split the label into two lines, inset <br> tag to a string in labels.formatter function:
xAxis: {
...,
labels: {
formatter: function() {
return this.value.split(' ').join('<br>')
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/vgp46bhw/
I created a simple column chart with a datetime xAxis and no other options. If I add simple data [342, 351, ...], it draws as expected, with columns that size to fit the space. However, when I use [x,y] data pairs, [[1481863920000,326],[1481863915000,330],...], the columns become overly wide and overlap each other.
jsFiddle showing issue http://jsfiddle.net/7hoes1p9/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Column chart with fat columns'
},
xAxis: {
type: 'datetime'
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [[1481863920000,326],[1481863915000,330],[1481863910000,418],[1481863905000,384],[1481863900000,329],[1481863895000,342],[1481863890000,550],[1481863885000,639],[1481863880000,488],[1481863875000,375],[1481863870000,532],[1481863865000,397],[1481863860000,362],[1481863855000,312],[1481863850000,373],[1481863845000,373],[1481863840000,344],[1481863835000,356],[1481863830000,545],[1481863825000,646],[1481863820000,454],[1481863815000,328],[1481863810000,553],[1481863805000,407]]
}]
});
Do I need to override some default behavior to get proper columns? Is there a minimum column width I need to unset? Does the data need to be added differently? Any help would be appreciated.
When you use a datetime axis with series like columns and bars, you should specify pointRange property. It defines what range of time is valid for a single column.
series: [{
pointRange: 1000,
example: http://jsfiddle.net/7hoes1p9/5/
You need to add the .pointwidth to get the optimum width of the columns as demonstrated here in this fiddle
column: {
pointWidth: 1,
}
or for other options refer to this thread here
Check the following in chart options:
plotOptions: {
series: {
pointWidth: 5
}
}
I have a chart with two combine chart types, line and column. I would like, as in the image below, to have my column chart at the bottom and my line chart a bit higher up and the line chart label to start hihger up as well.
I want something like:
yAxis: labels{y: -100}
My problem with this is that this only moves the labels, not the chart data.
My try so far can be found here: http://jsfiddle.net/32r7rctt/2/
It is possible to set 'height' and 'top' properties of the yAxis. Example: https://jsfiddle.net/mtvy24rj/1/
yAxis: [{
height: '70%',
top: '0%'
}, {
title: {
text: null
},
height: '30%',
top: '70%',
labels: {
enabled: false
},
}],
Thanks for your help. I have having a heck of a time trying to get something to work which is throwing me for a loop..
As seen in this jsfiddle (code copied below) i have a bar chart with a really long label which is wrapping.
What i am hoping to do i max out the label portion of the chart so that the label doesn't wrap while reducing the size of the actual data chart.
As an example; in the jsfiddle the label is maybe 30% of the total width and the bar data is 70%. Knowing my data, the labels would take up 80% of the width and the data would be in the last 20%.
Thoughts? Thanks, Steven.
$(function () {
$('#container').highcharts({
chart: { type: 'bar' },
xAxis: {
labels: {
style: {
"textOverflow": "none",
}
} ,
categories: ['Jan is the first month of the year and if you have a problem with that', 'Feb is the second']
},
series: [{ data: [29.9, 71.5] }]
});
});
Okay, looks like I got what i was looking for. Hope this helps someone else.
The key for me was setting the maringLeft attribute on the chart:
chart: {
type: 'bar',
marginLeft: 460
},
That, along with modifying the width, 'min-width' and useHTML on the label and lable style for the xAxis (Bar chart)
xAxis: {
categories: ['Short Name', 'Much Longer Location Name and if it is true then cool and if you want'],
labels: {
style: {
width: '400px',
'min-width': '350px'
},
useHTML : true
}
},
Thanks, Steven.
I have found this jsfiddle very helpful when I started working on paginated highchart columns. On top of this good example, I would like to know how I could change the x-axis labels into each data's corresponding name. (Ex. Along the x-axis, we should find the names of 'Fred G. Aandahl', 'Watkins Moorman Abbitt', 'Amos Abbott', etc. with their corresponding y-values and must change accordingly when the "Next" button is clicked.)
I have tried adding "xAxis" option inside the highcharts portion but still had no luck.
pie = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
labels: {
formatter: function(){
return this.value;
}
}
},
series: [{
data: []
}]
});
and
pie = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
labels: {
format: '{value}'
}
},
series: [{
data: []
}]
});
Can someone help me regarding on what I am missing in this example? It will be very much appreciated.
You can set type of xAxis to category and without category array the value in axis will be taken from the point. But you will need to change your setData call to
pie.series[0].setData( data.slice(from, to), true, true, false );
xAxis: {
type: 'category'
},
Example: http://jsfiddle.net/kpxp4/8/
I am able to change the x-axis labels accordingly by adding
pie.xAxis[0].update({
categories: category.slice(from, to)
})
after the setData call, where category is an array of all the x-axis labels that you want to display in correspondence to each y-axis value. Moreover, the
xAxis: {
type: 'category'
}
portion, as suggested by #Kacper Madej, works for the specific data format given originally. However, the pie.xAxis[0].update() could be used on a more general sense given that you know the array of x-axis labels that you want to use (regardless of the data or series format that you have).
Here is the link to the jsfiddle.
Hope this could be of any help, too.