Actually i want to merge highchart line series and ganttchart together in same chart. please help me with thsi.
i tred to add a spline series to the gantt but this did not work.
To have access to every basic series, you need to use Highcharts source code and add Gantt as a module:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/gantt.js"></script>
Now it is possible to use line series in ganttChart:
series: [..., {
data: [{
y: 1,
start: Date.UTC(2014, 10, 17)
}, {
y: 1,
start: Date.UTC(2014, 10, 24)
}, {
y: 2,
start: Date.UTC(2014, 10, 27)
}],
type: 'line'
}]
Live demo: https://jsfiddle.net/BlackLabel/xm7daL3b/
Docs: https://www.highcharts.com/docs/gantt/getting-started-gantt
Related
I am trying to show plotband on x axis but its getting displayed on all x axis data series. I want to render it for certain x axis values only. I
Thanks in advance.
You can achieve it by adding white plotBands on the yAxis (to cover the common part from the xAxis).
xAxis: {
min: Date.UTC(2014, 10, 17),
max: Date.UTC(2014, 10, 30),
plotBands: [{
from: Date.UTC(2014, 10, 18),
to: Date.UTC(2014, 10, 20)
}]
},
yAxis: {
plotBands: [{
from: 0.5,
to: 1.5,
color: 'white'
}]
},
Demo: https://jsfiddle.net/BlackLabel/nzk3mjg8/
I want to create PIE chart using Highchart as below image, please suggest a solution-
Thanks
You can use two pie series with different innerSize and size properties, for example:
series: [{
data: [{
y: 1,
color: 'blue'
}]
}, {
size: '70%',
innerSize: '30%',
data: [{
y: 3,
color: 'green'
}, {
y: 12,
color: 'blue',
showInLegend: false
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/4b1phj67/
API Reference: https://api.highcharts.com/highcharts/series.pie
I would like to add columns inside the area of chart red for negative and green for positive like attaching screenshot.
https://prnt.sc/psk7ge
You need to create a chart with area and column series. The set the colors, use negativeColor and color options:
series: [{
type: 'area',
data: [10, 20, 10, 20, 10],
threshold: -20
}, {
type: 'column',
data: [-10, 10, -15, 10, 15],
color: 'green',
negativeColor: 'red'
}]
Live demo: http://jsfiddle.net/BlackLabel/owh16dzL/
API Reference: https://api.highcharts.com/highcharts/series.column.negativeColor
I want to create a combination between a standard telemetry graph and a graph with non-telemetric values spread over a time axis.
I have a number of examples of graphs for example:
not telemetric data example
I thought to use either a bullet graph or in the x range.
But I was able to use these in a way that is synchronized with the normal graph.
ֿI am happy to hear ideas for a similar solution
To combine, such types of the series, you have to at lest create separate x axes. You can also create separate charts or panes.
Highcharts.chart('container', {
xAxis: [{
type: 'datetime'
}, {
type: 'linear'
}],
series: [{
type: 'xrange',
xAxis: 0,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 1,
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
}]
}, {
type: 'line',
data: [2, 2, 2, 2, 2, 2, 2],
xAxis: 1
}]
});
Live demo: http://jsfiddle.net/BlackLabel/j57q0z9n/
I'm having a problem getting Highcharts Column Range charts with multiple data series to display as I would like. Please refer to http://jsfiddle.net/jbreadner/6qsvjark/1/
There are two charts shown here, the "Top Chart" and "Bottom Chart".
The top chart uses multiple data series effectively, as seen both in code and also with the "Task 1" and "Task 2" entries in the legend. The problem with this chart is that the Task 1 and Task 2 bars are offset from each other vertically.
series: [{
name: 'Task 1',
stack: 'Tasks',
data: [{
x: 0,
low: 7,
high: 8
}, {
x: 1,
low: 6.5,
high: 7.5
}]
}, {
name: 'Task 2',
stack: 'Tasks',
data: [{
x: 0,
low: 8,
high: 9
}, {
x: 1,
low: 7.5,
high: 8.5
}]
}]
The bottom chart displays the column range chart as I would like to see, but it forces a color for every data point, and in using one data series it breaks the legend functionality. This results in uglier code with reduced functionality.
series: [{
name: 'Data',
data: [{
x: 0,
low: 7,
high: 8
},{
x: 0,
low: 8,
high: 9,
color: "#202020"
},{
x: 1,
low: 6.5,
high: 7.5
},{
x: 1,
low: 7.5,
high: 8.5,
color: "#202020"
}]
}]
Is there any way to modify the top chart's configuration so it retains multiple data sets, but visually looks like the bottom chart?
Column charts have a "stack" property, but this doesn't appear to work with the chart range type. The "stack" option is included in the top chart.
just add :
plotOptions: {
columnrange: {
grouping: false
}
}
to your chart. http://jsfiddle.net/6qsvjark/2/