When last value in left stepped area is different from previous one it is hard to see it. (we just see a line along the end of the chart)
Demo:
https://jsfiddle.net/x2qf5wuy/1/
$("#container").highcharts({
chart: {
type: 'area'
},
plotOptions: {
area: {
stacking: 'normal',
step: 'left'
}
},
series: [{
name: "Example 1",
data: [0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 2, 1, 1, 0, 0, 0, 0, 0]
}, {
name: "Example 2",
data: [0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 2, 1, 1, 0, 0, 0, 0, 10]
}]
});
There is a way in highchart to add an artificial padding to data series so that the user can see the last point ?
Wanted result :
You can add a point with the same y value as the last series point and use the setExtremes method to show only the wanted part of the area:
chart: {
type: 'area',
events: {
load: function() {
var series = this.series[1],
lastPoint = series.data[series.data.length - 1];
series.addPoint({
x: lastPoint.x + 100,
y: lastPoint.y
}, false);
this.xAxis[0].setExtremes(null, lastPoint.x + 0.5);
}
}
},
Live demo: https://jsfiddle.net/BlackLabel/54a6jdgy/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
Related
I'm trying to implement a drill down on a bar chart.
My data series are splitted on 6 categories on the x axis and I have three different series (Social, Cognitive and Language).
I would like to be able to drill down in my series. For example, 'social' is made of 'Family' and 'Personnal'.
My problem is that highchart only wants to drill down into one data serie. In my case I would like the drill down to display serveral data series.
In the fiddle below, I would like the drill down from 'Social' to display the series 'Family' and 'Personnal'. But highchart only display the 'Personnal' serie.
Is there a standard way to do this with Highcharts?
series: [
{
name: 'Social',
type: 'bar',
data: [
{ y: 10, drilldown: 'A' },
{ y: 5, drilldown: 'A' },
{ y: 3, drilldown: 'A' },
{ y: 1, drilldown: 'A' },
{ y: 0, drilldown: 'A' },
{ y: 0, drilldown: 'A' },
],
color: '#EEAA3C',
},
{
name: 'Cognitive',
type: 'bar',
data: [6, 3, 1, 0, 1, 1],
color: '#86BD4A',
},
{
name: 'Language',
type: 'bar',
data: [4, 2, 0, 2, 0, 0],
color: '#E26E3E',
},
],
drilldown: {
series: [
{
name: 'Family',
id: 'A',
type: 'bar',
data: [1, 1, 1, 0, 0, 0],
color: '#F2B553',
},
{
name: 'Personal',
id: 'A',
type: 'bar',
data: [9, 4, 2, 1, 0, 0],
color: '#F8CC87',
},
],
},
https://jsfiddle.net/pacambi/3k4eng7w/
Thanks !
I created highcharts heatmap with drilldown. Drilldown has link on xaxis lable. Could I have link only on yaxis? And remove link on xaxis. Since my drilldown chart is associate to y not x.
Highcharts.chart('container', {
chart: {
type: 'heatmap'
},
colorAxis: {
min: 0,
stops: [
[0, '#7EAB55'],
[0.5, '#FFFE55'],
[1, '#B02418']
],
},
series: [{
data: [{
x: 0,
y: 0,
value: 0,
drilldown: 'animals'
}, {
x: 0,
y: 1,
value: 1
}, {
x: 1,
y: 0,
value: 2,
drilldown: 'animals'
}, {
x: 1,
y: 1,
value: 1
}],
dataLabels: {
enabled: true,
color: '#000000'
}
}],
drilldown: {
series: [{
id: 'animals',
data: [
[0, 3, 1],
[1, 1, 4],
[2, 4, 3]
]
}]
}
});
This is example in fiddle. Thanks.
https://jsfiddle.net/lundi/jdc4mpk2/
From Sebastian's suggestion, this is the answer.
You can use the chart.inverted feature to achieve the wanted result: jsfiddle.net/BlackLabel/82qapmoe
Is it possible to make the following chart with Highcharts library?
It's a simple line chart but with inverted triangle shaped grid. Is there any predefined type or a way to customize the grid shape? Any pointers which will guide me to a proper direction would help. Thank you!
Another method of how to create this type of chart:
Demo
Highcharts.chart('container', {
chart: {
width: 500,
},
xAxis: {
opposite: true,
title: {
text: 'Report Date'
},
gridLineWidth: 1,
type: 'datetime',
categories: ['01/01/2012', '02/01/2012', '03/01/2012', '04/01/2012', '05/01/2012', '06/01/2012', '07/01/2012', '08/01/2012', '09/01/2012', '10/01/2012'],
tickmarkPlacement: 'on',
labels: {
rotation: -90,
y: -18
},
offset: -13,
lineWidth: 0,
max: 8.6,
},
legend: {
enabled: false
},
yAxis: {
title: {
text: 'Milestones'
},
categories: ['01/01/2012', '02/01/2012', '03/01/2012', '04/01/2012', '05/01/2012', '06/01/2012', '07/01/2012', '08/01/2012', '09/01/2012', '10/01/2012'],
tickmarkPlacement: 'on',
gridLineWidth: 1,
tickPosition: 'inside',
min: 0,
minPadding: 0,
startOnTick: false
},
series: [{
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
marker: {
enabled: false
},
color: 'grey',
enableMouseTracking: false,
animation: false
}, {
data: [6, 6, 6, 7, 8, 7, 7, 8, 8.5, 9]
}, {
data: [5, 5, 5, 6, 6.5, 6, 6.5, 7.5, 8]
}, {
data: [4, 4, 4, 5, 5.5, 5.5, 6]
}, {
data: [2, 2.5, 2.5, 3.5, 4]
}, {
data: [1, 1.5, 2]
}, {
type: 'arearange',
data: [[0, 0, -5], [9.2, 9, -5]],
color: 'white',
fillOpacity: 1,
marker: {
enabled: false
},
zIndex: -1,
enableMouseTracking: false,
animation: false
}]
});
There is no such series type. However, you can make it with fake polygon series that will hide half of the chart. Check demo and code posted below.
Code:
Highcharts.chart('container', {
chart: {
height: 500,
width: 500,
events: {
load: function() {
var chart = this,
polygon = chart.series[2].group,
x = polygon.translateX,
y = polygon.translateY;
polygon.translate(x + 3, y + 3);
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
opposite: true,
gridLineWidth: 1,
gridLineColor: '#ddd',
tickInterval: 1,
maxPadding: 0,
lineWidth: 0,
max: 10,
min: 0
},
yAxis: {
maxPadding: 0,
tickInterval: 1,
gridLineColor: '#ddd',
max: 10,
min: 0
},
series: [{
name: 'Installation',
data: [8, 6, 7, 8, 7, 6]
}, {
name: 'Manufacturing',
data: [3, 2, 4, 4]
}, {
type: 'polygon',
animation: false,
showInLegend: false,
enableMouseTracking: false,
color: '#fff',
lineWidth: 10,
data: [
[0, 0],
[10, 0],
[10, 10]
]
}, {
type: 'line',
showInLegend: false,
enableMouseTracking: false,
data: [
[0, 0],
[10, 10]
],
color: '#ddd',
lineWidth: 1,
marker: {
enabled: false
}
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
Demo:
https://jsfiddle.net/BlackLabel/xL9taoym/1/
You can use Highcharts SVG Renderer to render triangle that covers half of the chart.
Check this demo: https://jsfiddle.net/BlackLabel/2boma9zs
events: {
load: function() {
var chart = this,
left = chart.plotLeft,
top = chart.plotTop,
width = chart.plotSizeX,
height = chart.plotSizeY;
chart.renderer.path([
'M', left + 1, top + height,
'L', left + width + 1, top,
left + width + 3, top,
left + width + 3, top + height + 3,
left + 1, top + height + 3,
left + 1, top + height
])
.attr({
fill: '#fff'
})
.add()
.toFront();
}
}
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
https://api.highcharts.com/class-reference/Highcharts.SVGElement#toFront
https://api.highcharts.com/highcharts/chart.events.load
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 have a bubble chart with xAxis and yAxis from 0 to 5. If I have a bubble on the xAxis or yAxis 5, the bubble get cut of.
$(function () {
$('#container').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy',
height: 500,
width: 500,
},
title: {
text: 'Highcharts Bubbles'
},
yAxis: {
min: 0,
max: 5,
gridLineWidth: 1,
},
xAxis: {
min: 0,
max: 5,
gridLineWidth: 1,
},
series: [{
data: [[5, 4, 2], [3, 1, 1], [4, 2, 3], [1, 2, 3], [1, 4, 1], [2, 5, 1], [5, 2, 3], [3, 2, 1]]
}]
});
});
http://jsfiddle.net/tum3zzzu/1/
I somehow found a trick with doing max: 5.5 but it work only for xAxis. On yAxis max: 5.5 is rounded to 6.
How can I solve this problem?
You can use tickPositioner to tell the chart exactly what to show as ticks. I also used showLastLabel: false to hide the last tick (which is 5.5). Here's what you can do in your code:
yAxis: {
min: 0,
max: 5.5,
endOnTick: true,
showLastLabel: false, // to hide 5.5
gridLineWidth: 1,
tickPositioner: function() {
var positions = [0], // to start from 0
tick = Math.floor(this.dataMin),
increment = Math.ceil((this.dataMax - this.dataMin) / 6);
for (tick; tick - increment < this.dataMax; tick += increment) {
positions.push(tick);
}
positions.push(this.dataMax + 0.5); // to add the last label 5.5
return positions;
}
}
And Here's the DEMO.