The yAxis values min and max are set to 0 and 100 with a tick interval of 20 by me.
But when the resolution is changed to a lower resolution or the chart is zoomed in,
I have observed that the height of the high hart decreases and the max value is set to 120 and tick interval to 40 on its own
Which is not the desired behavior can you please help me out how to avoid it?
How can i make sure the max is 100 with a tickinterval 20 in all chart heights and also in turn in lower resolution.
Thanks in advance
Note:- I believe the height is decreased because the xAxis labels rotate diagonally as the width is decreased (in lower resolution) and that occupies more space in the HTML div and causes the height of the chart to decrease.
YAxis with expected behaviour
YAxis in lower resolution with decreased height
https://jsfiddle.net/BlackLabel/drgkt598/
Highcharts.chart('container', {
chart: {
type: "column",
height: 205,
plotBackgroundColor: "#D3D3D3",
width: 250,
},
title: {
text: ''
},
credits: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: false
},
pointPadding: 0
}
},
xAxis: {
lineWidth: 2,
type: 'category',
lineColor: '#000',
tickLength: 0
},
yAxis: [{
title: {
text: ''
},
min: 0,
max: 100,
tickInterval: 10,
gridLineWidth: 0,
plotLines: [{
value: 70,
color: 'black',
dashStyle: "Solid",
width: 4,
zIndex: 5,
label: {
text: 39,
align: "right",
x: 2,
y: -5,
style: {
color: 'black',
fontWeight: "bold",
fontSize: "18px",
}
}
}],
}, {
linkedTo: 0,
width: 60,
labels: {
enabled: false
},
plotBands: [{
color: 'rgb(204,0,0)',
from: 0,
to: 30.99,
zIndex: 1,
},
{
color: 'rgb(226,113,113)',
from: 31,
to: 44.99,
zIndex: 3,
},
{
color: 'rgb(247,209,34)',
from: 45,
to: 54.99,
zIndex: 3,
},
{
color: 'rgb(136,207,136)',
from: 55,
to: 68.99,
zIndex: 3,
},
{
color: 'rgb(68,180,68)',
from: 69,
to: 87.99,
zIndex: 3,
},
{
color: 'rgb(0,153,0)',
from: 88,
to: 100,
zIndex: 3,
}
]
}],
series: [{
dataLabels: {
color: "white",
verticalAlign: "bottom",
crop: false,
style: {
fontWeight: "Normal"
}
},
data: [{
y: 85,
name: 'A',
color: 'red',
dataLabels: {
formatter() {
return '<span style="font-size:11px;">A</span>';
},
y: -20
}
}, {
y: 72,
name: 'B',
color: 'green',
dataLabels: {
formatter() {
return '<span style="font-size:11px;">B</span>';
},
y: -15
}
}, {
y: 83,
name: 'C',
color: 'blue',
dataLabels: {
formatter() {
return '<span style="font-size:11px;">C</span>';
},
y: -15
}
}],
showInLegend: false
}]
});
Just like you have noted - there is not enough space to render 5 labels for some smaller dimensions, so implemented logic tries to calculate other timestamps, which will fit, like [0, 40, 80, 120].
I think that you can control it by using the responsive options and set the tickInterval to another value like 50.
Demo: https://jsfiddle.net/BlackLabel/zupbe174/
responsive: {
rules: [{
condition: {
maxHeight: 120
},
chartOptions: {
yAxis: [{
tickInterval: 50
}, {
}]
}
}]
}
API: https://api.highcharts.com/highcharts/responsive.rules.condition
Related
I am attempting to create the following chart:
However I can't seem to get the plotbands to work in this way; right now, they fill the entire axis:
I am not sure if I should use annotations instead, but so far I haven't gotten it to work. What can I try next?
Highcharts.chart('container',{
credits: {
enabled: false
},
title: {
text: "hello world",
style: {
visibility: 'hidden'
}
},
chart: {
type: 'line',
width: 400,
},
legend: {
enabled: false
},
exporting: {
enabled: true,
allowHTML:true,
chartOptions: {
chart: {
marginLeft: 175,
marginRight: 175
},
plotOptions: {
line: {
dataLabels: {
style: {
fontSize: 14
},
verticalAlign: "top",
useHTML: true
}
}
}
}
},
yAxis: {
startOnTick: false,
endOnTick: false,
gridLineWidth: 2,
tickWidth: 2,
tickLength: 20,
plotBands: [{
color: 'rgba(231, 23, 60, 0.5)', // Color value
from: 5, // Start of the plot band
to: 6.2 // End of the plot band
},
{
color: 'rgba(53, 101, 237, 0.5)', // Color value
from: 1, // Start of the plot band
to: 3 // End of the plot band
}
],
title: {
align: 'high',
offset: -40,
text: 'mmol/L',
style: {
fontWeight: "bold",
fontSize: 15
},
rotation: 0,
y: -20
},
min: 0,
max: 7,
labels: {
x: -10,
y: -3,
formatter: function () {
if (this.value != 0) {
if (this.value < 8) {
return this.value;
}
}
},
style: {
fontWeight: "400",
lineHight: "20",
padding: "0",
fontSize: "13"
}
}
},
annotations: [{
shapes: [{
point: '0',
type: 'circle',
r: 10
}, {
point: '3',
type: 'rect',
width: 20,
height: 20,
x: -10,
y: -25
}, {
fill: 'none',
stroke: 'red',
strokeWidth: 3,
type: 'path',
points: ['0', '1', {
x: 6,
y: 195,
xAxis: 0,
yAxis: 0
}],
markerEnd: 'arrow'
}],
labels: [{
point: {
x: 6,
y: 195,
xAxis: 0,
yAxis: 0
}
}]
}],
xAxis: {
gridLineColor: 'transparent',
accessibility: {
rangeDescription: 'Range: 2010 to 2020'
},
categories: [2018, 2019]
},
plotOptions: {
line: {
dataLabels: {
style: {
fontSize: 14
},
verticalAlign: "top",
useHTML: true,
format: '<div style="max-width: 10ch; text-align: center;">{y}<br/>mmol/L</div>'
}
}
},
series: [{
name: '',
color: "black",
data: [5.4, 3],
showInLegend: false,
dataLabels: {
enabled: true,
useHTML: true,
}
}],
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
This kind of plotBand shape is not possible from the API level, but you can simulate it in several ways. Example configurations:
SVG Renderer:
chart: {
events: {
render() {
const chart = this;
if (chart.rects) {
chart.rects = chart.rects.destroy();
}
chart.rects = chart.renderer.g('rects').attr({
zIndex: 1
}).add();
let x = chart.xAxis[0].toPixels(1),
y = chart.yAxis[0].toPixels(4),
width = chart.xAxis[0].toPixels(2) - chart.xAxis[0].toPixels(1),
height = chart.yAxis[0].toPixels(2) - chart.yAxis[0].toPixels(4);
chart.rect = chart.renderer.rect(x, y, width, height)
.attr({
fill: 'grey'
}).add(chart.rects)
chart.rect = chart.renderer.rect(chart.xAxis[0].toPixels(3), y, width, height)
.attr({
fill: 'grey'
}).add(chart.rects)
}
}
},
Demo:
https://jsfiddle.net/BlackLabel/wst607ub/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Annotations:
annotations: [{
draggable: false,
shapes: [{
points: [{
x: 1,
y: 2,
xAxis: 0, // xAxis reference used, use xAxis value
yAxis: 0 // yAxis reference used, use xAxis value
}, {
x: 2,
y: 2,
xAxis: 0,
yAxis: 0
}, {
x: 2,
y: 4,
xAxis: 0,
yAxis: 0
}, {
x: 1,
y: 4,
xAxis: 0,
yAxis: 0
}],
type: 'path'
}]
}]
Demo:
https://jsfiddle.net/BlackLabel/uvxzp6o7/
API Reference:
https://api.highcharts.com/highcharts/annotations
Polygon series:
series: [{
name: 'Polygons',
type: 'polygon',
color: 'grey',
showInLegend: false,
enableMouseTracking: false,
states: {
inactive: {
opacity: 1,
},
},
data: [
[1, 2],
[2, 2],
[2, 4],
[1, 4],
null, // allows multiple polygons
[3, 2],
[4, 2],
[4, 4],
[3, 4],
]
}]
Demo:
https://jsfiddle.net/BlackLabel/4n7ep3k2/
API Reference:
https://api.highcharts.com/highcharts/series.polygon
Take note that annotations and polygon series require the module to be included.
I've been trying to make the gauge thinner. I succeeded a little by making the innerRadius 90%, but I'm unable to change the size of the green section. It's always bigger. I tried playing around with 'outerRadius' too but lo luck so far.
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['30%', '85%'],
size: '150%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#EEE',
innerRadius: '110%',
outerRadius: '85%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickAmount: 2,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: ''
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [20],
dataLabels: {
format: '<div style="text-align:center">' +
'<span style="font-size:25px">{y}</span><br/>' +
'<span style="font-size:12px;opacity:0.4">km/h</span>' +
'</div>'
}
}]
}));
Here's a fiddle. I'm basically trying to make the green match the grey.
The size of the green section can be set by add properties radius and innerRadius in series.data.
In your case, it should be:
series: [{
name: 'Speed',
data: [{
y: 20,
radius: 90,
innerRadius: 105
}],
dataLabels: {...}
}]
more info here
You can also set radius and innerRadius properties on a series level:
series: [{
radius: 90,
innerRadius: 105,
...
}]
Live demo: https://jsfiddle.net/BlackLabel/fwumc7db/
API Reference:
https://api.highcharts.com/highcharts/series.solidgauge.innerRadius
https://api.highcharts.com/highcharts/series.solidgauge.radius
The plotline should spread across the graph but the plot band should of smaller width.
1) Initially without width being set.
2) When y axis width is set to 20
3) I want something like this where both the plot band and the plotline co exists
this is the fiddle code link to what I have tried so far.
Can someone please help me out thank you very much in advance.
https://jsfiddle.net/mncfy80p/
chart: {
type: "column",
height: 205,
plotBackgroundColor: "#D3D3D3",
width:250,
},
title : {
text:''
},
credits: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
inside: true
},
pointPadding: 0
}
},
xAxis: {
visible:false,
},
yAxis: {
title: {
text: ''
},
min : 0,
max : 100,
tickInterval : 10,
gridLineWidth: 0,
plotLines: [{
value: 70,
color: 'black',
dashStyle: "Solid",
width: 4,
zIndex: 5,
label: {
text: 39,
align: "right",
x: 2,
y: -5,
style: {
color: 'black',
fontWeight: "bold",
fontSize: "18px",
}
}
}],
plotBands: [
{
color: 'rgb(204,0,0)',
from: 0,
to: 30.99,
zIndex: 3,
},
{
color: 'rgb(226,113,113)',
from: 31,
to: 44.99,
zIndex: 3,
},
{
color: 'rgb(247,209,34)',
from: 45,
to: 54.99,
zIndex: 3,
},
{
color: 'rgb(136,207,136)',
from: 55,
to: 68.99,
zIndex: 3,
},
{
color: 'rgb(68,180,68)',
from: 69,
to: 87.99,
zIndex: 3,
},
{
color: 'rgb(0,153,0)',
from: 88,
to: 100,
zIndex: 3,
}
],
},
series: [{
dataLabels: {
color: "white",
verticalAlign: "bottom",
crop: false,
style: {
fontWeight: "Normal"
}
},
data: [{
y: 85,
color:'red',
dataLabels: {
formatter(){
return '<span style="font-size:11px;">A</span>';
},
y:-20
}
}, {
y: 72,
color:'green',
dataLabels:{
formatter(){
return '<span style="font-size:11px;">B</span>';
},
y:-15
}
}, {
y: 83,
color:'blue',
dataLabels:{
formatter(){
return '<span style="font-size:11px;">C</span>';
},
y:-15
}
}],
showInLegend: false
}]
});
The simplest solution is to create another y-axis and move plot bands to it:
yAxis: [{
...,
plotLines: [...],
}, {
...,
plotBands: [...]
}]
Live demo: https://jsfiddle.net/BlackLabel/agq6ebjd/
API Reference: https://api.highcharts.com/highcharts/yAxis
I am not able to see the green bar in the second stack i.e when X-axis is Q3 19 , for the following fiddle.I have been trying to debug for a while but no clue . Please help . I think maybe its due to same values in the stack and am using minPointLength and the Highcharts API is getting confused.
https://jsfiddle.net/2fmbs9nv/26/
$(function() {
$('#container').highcharts({
colors: ['#8dafb7', '#f19962', '#e97381', '#f8c465', '#6cd299', '#87cfe2'],
chart: {
type: 'column',
marginBottom: 50,
marginTop: 150,
height: 700,
events: {
load: function() {
var stacks = this.yAxis[0].stacks.column,
stack,
point;
for(var prop in this.yAxis[0].stacks.column) {
stack = stacks[prop];
if (stack.total === 0) {
this.series.forEach(function(series) {
point = series.points.find((point) => point.x === stack.x);
if(point) {
point.graphic.hide();
}
}, this);
}
}
}
}
},
title: {
text: ''
},
xAxis: {
categories: ['Q2,16', 'Q3,16', 'Q4,16', 'Q1,17'],
width: 700,
tickmarkPlacement: 'on',
labels: {
y: 40,
style: {
color: '#333333',
fontSize: '25',
fontFamily: 'ProximaNova-Light',
opacity: '.6'
},
}
},
yAxis: {
gridLineWidth: 0,
min: 0,
tickInterval: 20,
title: {
text: ''
},
labels: {
style: {
color: '#333333',
fontSize: '25',
fontFamily: 'ProximaNova-Light',
opacity: '.5'
},
formatter: function() {
return '$' + this.value;
}
},
stackLabels: {
style: {
color: '#555555',
fontSize: '25',
fontFamily: 'ProximaNova-Regular'
},
enabled: false,
formatter: function() {
if (this.total < 1000) {
return '$' + this.total;
} else {
return '$' + (this.total / 1000).toFixed(2) + 'K';
};
}
}
},
legend: {
enabled: false,
width: 600,
floating: false,
x: 50,
align: 'left',
style: {
color: '#555555',
fontSize: '25',
fontFamily: 'ProximaNova-Regular',
opacity: '.8'
},
borderWidth: 0
},
tooltip: {
enabled: false
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
},
series: {
minPointLength: 20,
pointWidth: 30
}
},
series: [{
name: 'FTE-OpEx ',
data: [null, 3, 40, 70],
pointWidth: 30,
}, {
name: 'FTE-CapEx',
data: [null, 2, 30, 20],
pointWidth: 30
}, {
name: 'AWF-OpEx',
data: [null, 4, 40, 20],
pointWidth: 30
}, {
name: 'AWF-CapEx',
data: [null, 4, 40, 20],
pointWidth: 30
}, {
name: 'HW/SW',
data: [null, 4, 40, 20],
pointWidth: 30
}, {
name: 'Other',
data: [null, 4, 40, 20],
pointWidth: 30
}].map(function(series) {
series.data = series.data.map((val) => val === null ? 0 : val);
return series;
})
});
});
In your highcharts config minPointLength is causing issue. It restricts the height of bar and hence there is some computation issue from highchart.
plotOptions: {
...
series: {
/* minPointLength: 20, */
pointWidth: 30
}
},
Here removing minPointLength solves the issue and the green bar is visible now.
Please have look at minPointLength here
I'm using Highcharts to develop a customized chart. Here is what I've gotten by my own jsfiddle.
Here is my code:
$(function () {
$('#container').highcharts({
chart: {
type: 'area',
inverted: true,
height: 700,
width: 780,
marginRight: 20
},
credits: {
enabled: false
},
colors: [
'#828385',
'#3AAFC1',
'#F87D2A',
'#80699B',
'#3D96AE',
'#DB843D',
'#92A8CD',
'#A47D7C',
'#B5CA92'],
exporting: {
enabled: false
},
title: {
text: ' '
},
subtitle: {
style: {
position: 'absolute',
right: '0px',
bottom: '10px'
}
},
legend: {
itemDistance: 30,
x: 180,
verticalAlign: 'top'
},
xAxis: {
categories: ["Label1", "Label2", "Label3", "Label4", "Label5", "Label6", "Label7", "Label8", "Label9", "Label10"],
offset: -410,
labels: {
overflow: 'justify'
},
plotLines: [{
color: '#A0A0A0',
width: 1,
value: 0
}, {
color: '#A0A0A0',
width: 1,
value: 1
}, {
color: '#A0A0A0',
width: 1,
value: 2
}, {
color: '#A0A0A0',
width: 1,
value: 3
}, {
color: '#A0A0A0',
width: 1,
value: 4
}, {
color: '#A0A0A0',
width: 1,
value: 5
}, {
color: '#A0A0A0',
width: 1,
value: 5
}, {
color: '#A0A0A0',
width: 1,
value: 6
}, {
color: '#A0A0A0',
width: 1,
value: 7
}, {
color: '#A0A0A0',
width: 1,
value: 8
}, {
color: '#A0A0A0',
width: 1,
value: 9
}]
},
yAxis: {
title: {
text: 'Índice teste'
},
max: 100,
min: 0,
},
plotOptions: {
area: {
fillOpacity: 0.5
},
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
if (jQuery('#type_group_name_hidden').val() == 'Processo') {
jQuery('#type_group_name_hidden').val('Atividade');
} else if (jQuery('#type_group_name_hidden').val() == 'Atividade') {
jQuery('#type_group_name_hidden').val('Procedimento');
} else if (jQuery('#type_group_name_hidden').val() == 'Procedimento') {
jQuery('#type_group_name_hidden').val('Processo');
}
jQuery('#group_name_hidden').val(this.category);
requestAjaxChart('processos', buildProcessos);
}
}
},
marker: {
lineWidth: 1
},
threshold: 50
}
},
series: [{
name: "Market",
data: [46.503590664272934, 51.39078282828278, 56.89226932668327, 47.66801075268824, 46.82561768530563, 59.23058676654176, 51.08220338983055, 46.17849829351536, 55.84550063371354, 51.428756058158314]
}, {
name: "My network",
data: [48.175, 27.159999999999997, 39.916666666666664, 38.6, 53.85, 38.949999999999996, 30.4, 51.9, 33.519999999999996, 54.7875]
}, {
name: "Avg",
data: [70, 80, 65, 75, 85, 82, 72, 69, 71, 58]
}]
});
});
Even it looks pretty good, it's not exactly what the client desire. I need to do some changes as described bellow:
Remove all the vertical lines on xAxis. As my chart is a inverted one, I couldn't figure out how to remove them.
On the xAxis values (0 - 100), remove the intermediaries values (10, 20, 30, ...) keeping just the first and last value (0, 100)
Move the yAxis labels upon the horizontal lines
Make clickable the points behind the overflowed chart area
I've tried almost all configuration options but with no success.
Any suggestion?
Some answers :
1) See from docs gridlineWidth property.
2) See from docs tickPositions property.
3) Another docs labels.y property.
4) Not possible, even if it's SVG/VML it still is HTML, you can't make clickable DIV which is positioned behind another one.