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
Is there is a way to round off the area points and make them less pointed when used in the polar chart?
I have tried the 'areaspline', but with polar chart it's not quite right, as you can see here:
http://jsfiddle.net/qwbu6r3t/2/
Highcharts.chart('container', {
chart: {
polar: true
},
title: {
text: 'Highcharts Polar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
formatter: function () {
return this.value + '°';
}
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
}
},
series: [{
type: 'areaspline',
name: 'Area spline',
data: [1, 2, 3, 4, 5, 6, 7, 8]
}, {
type: 'area',
name: 'Area',
data: [1, 8, 2, 7, 3, 6, 4, 5]
}]
});
EDIT
What I need
You can override highcharts Highcharts.seriesTypes.areaSpline.prototype.getPointSpline with same method but with changed smoothing parameter. (Default 1.5)
...
var smoothing = 3, // 1 means control points midway between points, 2 means 1/3 from the point, 3 is 1/4 etc
...
Live example:
http://jsfiddle.net/q3h6xwog/
just change area to areaspline would do what you want i think so
I need to connect each series dot on a specific base in a polar chart type. Basically this polar starts from -5 (as center of polar, but it is not visible), but I like to connect it from 0 until the series values.
It is what I have currently: http://jsfiddle.net/s9h6ry8r/
It is what I need:
You can use the scatter series with null points, which allows to print that kind of chart.
series: [{
type: 'scatter',
lineWidth: 2,
data: [
[0, 20], {
x: 0,
y: 0,
marker: {
enabled: false
}
},
null, [45, 30], {
x: 45,
y: 0,
marker: {
enabled: false
}
},
null
]
}]
Example:
- http://jsfiddle.net/s38w1b28/
I have a highcharts heat map and would like to plot several line series / spline curves on top of the heat map. Is this possible?
You could have tried it quicker than you could have asked the question.
It works just fine, no need to overlaying plots or use other tricks. Just configure each series as the appropriate type:
series: [{
type: 'heatmap',
name: 'Sales per employee',
borderWidth: 1,
data: [[0,0,10],[0,1,19],[0,2,8],[0,3,24],[0,4,67],[1,0,92],[1,1,58],[1,2,78],[1,3,117],[1,4,48],[2,0,35],[2,1,15],[2,2,123],[2,3,64],[2,4,52],[3,0,72],[3,1,132],[3,2,114],[3,3,19],[3,4,16],[4,0,38],[4,1,5],[4,2,8],[4,3,117],[4,4,115],[5,0,88],[5,1,32],[5,2,12],[5,3,6],[5,4,120],[6,0,13],[6,1,44],[6,2,88],[6,3,98],[6,4,96],[7,0,31],[7,1,1],[7,2,82],[7,3,32],[7,4,30],[8,0,85],[8,1,97],[8,2,123],[8,3,64],[8,4,84],[9,0,47],[9,1,114],[9,2,31],[9,3,48],[9,4,91]],
dataLabels: {
enabled: true,
color: 'black',
style: {
textShadow: 'none',
HcTextStroke: null
}
}
},
{
type: 'line',
name: 'line',
data: [3, 2.67, 3, 1.33, 1.33, 3.2, 1.6, 2.5, 1.4, 0.2],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
},
},
{
type: 'spline',
name: 'spline',
data: [3.5, 1.67, 2, 0.33, 3.33, 1.2, 2.6, 0.5, 2.4, 1.2],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[1],
fillColor: 'blue'
}
}]
Produces:
Fiddle here.
Sure, just use CSS positioning to overlay two charts, one being the heat map and one the lines. Obviously the top one will need to have the chart background color set to transparent.