I need to show multiple axis, which is having constant values in the x-axis and dynamic values in y-axises
1st y-axis regarding bubble chart enter image description here
2nd y-axis regarding column chart
We got requriment like to show them side by side not like merged as shown in second refrenece picture.
enter image description here
Implemented bubble and column chart in one chart using 2 y-axis and 1 x-axis. We got chart as show in reference.
enter image description here
Both are getting mergged instead we want to show them side by side.
You need to create column and bubble series with, each with own y-axis. Use pointPlacement property to position columns next to bubbles.
series: [{
type: 'column',
pointPadding: 0.4,
pointPlacement: 0.3,
data: [70, 50, 65],
yAxis: 1
}, {
type: 'bubble',
data: [3, 2, 3]
}]
Live demo: http://jsfiddle.net/BlackLabel/pwq3shef/
API Reference:
https://api.highcharts.com/highcharts/series.column.pointPlacement
https://api.highcharts.com/highcharts/series.column.pointPadding
How can I draw a high chart with two labels in x coordinate one is string another one is a date in highcharts
You can use the xAxis.categories feature to achieve it.
Demo: https://jsfiddle.net/BlackLabel/xj0dh8es/
xAxis: {
categories: ['test1', '04/07','05/07','06/07']
},
API: https://api.highcharts.com/highcharts/xAxis.categories
I need to add graphic annotations in a chart on the date (x) axis, so I added a new series with a constant value of 0 (x: date, y: 0), with custom image markers. Annotations look like this:
The problem with this approach is that the constant 0 value in the annotation series is messing around with the automatically placed ticks (on the right), which then stretch the whole Y range from 0 onwards, instead of the min and max of other series, as it is by default. That drastically affects the display of other series, whose value are far away from 0, making them look less diverse.
Highcharts comes with an annotation module, bit I didn't find an option to pin it to the axis and use a different graphic.
Is it possible to either:
a) Prevent the annotation series to influence the Y axis ticks?
b) Make customized annotations on the X axis without adding new constant series?
The easiest solution here I think would be to create a new yAxis, and have your constant series use that yAxis. Like this:
yAxis: [{
...//original yAxis
}, {
visible: false //this hides all axis lines, ticks, and labels
}]
Then in the series, you would set:
series: [{
... //Real data series
}, {
yAxis: 1, //constant series
...
}]
I have the following chart I would like to render the working times intervalls as columnrange and palcing the charts close to the xAxis.
with this part of code in the code below
chart: {
spacingTop: 0,
paddingTop: 0,
zoomType: 'x',
},
I am getting the following charts:
https://jsfiddle.net/62jq6zsd/
But I am not getting the right result.
Putting your code into a fiddle, I can see that nothing is plotted:
http://jsfiddle.net/jlbriggs/3d3fuhbb/225/
Looking at your data, the reason is apparent. You have your data set up as;
{
x: 1483358580000,
y: 1
}
But the columnrange series type requires the data elements of low and high, with an optional/inferred x value.
In addition, you have points with null values for x, which does not work for Highcharts - there must always be an x value, whether set or inferred.
It's also unnecessary - use of null points to break a line series is needed because lines are meant to be continuous; the columnrange type already has the breaks built in.
And finally, you have your x and y mixed up - since you are inverting the chart, the axes swap places - x is the vertical axis, and y is the horizontal.
If your values are time, as in the 1483358580000 above, you need to specify two timestamps - one for the start, and one for the end of each bar segment.
Example from the Highcharts demo:
data: [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
]
(in this example, the x value is determined by the order of the data points, and does not need to be set explicitly. In your case, you will need to specify the x value, since you want them all on the same line)
Demo Fiddle:
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/columnrange/
{{ EDIT }}
Using your chart as a base, here is an updated version.
Code (data based on yours, edited for demonstration)
xAxis: {
categories: ['', 'Woring time'],
title: {
text: null
},
gridLineWidth: 0
},
yAxis: {
type: 'datetime'
},
series: [{
data: [
[1,1483337940000,1483337950000],
[1,1483337970000,1483337990000],
[1,1483338000000,1483338010000],
[1,1483338030000,1483338070000]
]
}]
Fiddle:
http://jsfiddle.net/jlbriggs/qdza1032/
{{ Edit again for comments }}
To reduce space between the series, you have a variety of options
1) reduce the height of your chart
2) increase the width of your bar
1/2) do both!
3) work with your axis min/max and minPadding/maxPadding settings, if you want one side of the series and not the other.
Option one, in a fiddle:
http://jsfiddle.net/jlbriggs/qdza1032/1/
Option three:
http://jsfiddle.net/jlbriggs/qdza1032/2/
I'm able to create in Excel a chart where...
The data is in a different date frequency based on the x axis
Two different chart types - line over bars
So for example, I can have a bar chart on the primary x-axis / y-axis that is aggregated by year. Then another series as a line that changes on a daily basis. What allows the line to show up as a daily time series (raw values) is the option to turn on the secondary x-axis. With this on, the two time series can work off a different date frequency.
Is this possible in highcharts? I've only been able to find examples of where it's possible to enable the secondary y-axis but both time series is in the same date frequency
Yes. The method to add a second x axis is exactly the same as it is to add a secondary y axis - you just make the changes to the xAxis properties instead of the yAxis properties, and specify the xAxis for you series instead of specifying the yAxis.
Example:
xAxis: [{
}, {
opposite: true
}]
And:
series: [{
data: [...data...]
}, {
xAxis: 1,
type: 'line',
data: [...data...]
}]
Fiddle example:
http://jsfiddle.net/jlbriggs/ko7ton0w/