I'm using Highcharts, and want to hide the protrusion of grid line out of the graph area. I mean,
it looks like this now:
and I want it to look like this (The protrusion of grid line in the right of the chart is hidden):
The highcharts config is below:
{
chart: {
width: 420,
height: 350,
style: {
textAlign: 'center',
'text-align': 'center',
},
},
colors: ['#a1cbff'],
title: {
text: undefined,
},
xAxis: {
title: { text: undefined },
tickInterval: 0.1,
max: 1,
min: 0,
gridLineWidth: 1,
},
yAxis: [{
title: { text: undefined },
}],
series: [{
type: 'column',
pointPlacement: 'between',
data: [...SOME_DATA],
}],
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 1,
groupPadding: 0,
shadow: false,
},
},
tooltip: {
formatter() { return this.y; },
},
legend: {
enabled: false,
},
exporting: false,
credits: false,
}
It is possible, however, it is not so simple and intuitive to make it as you expect in Highcharts. Check the demo and code posted below, there you will find the solution with pointRange = 0.1, pointPlacement = -0.5, min: 0.05, max: 0.95 and tickInterval = 0.1.
Code:
Highcharts.chart('container', {
chart: {
width: 420,
height: 350,
style: {
textAlign: 'center',
'text-align': 'center',
},
},
colors: ['#a1cbff'],
title: {
text: undefined,
},
yAxis: [{
title: {
text: undefined
}
}],
xAxis: {
min: 0.05,
max: 0.95,
tickInterval: 0.1
},
series: [{
type: 'column',
pointPlacement: -0.5,
pointRange: 0.1,
data: [
[0.1, 130],
[0.2, 110],
[0.3, 240],
[0.4, 150],
[0.5, 250],
[0.6, 190],
[0.7, 240],
[0.8, 220],
[0.9, 270],
[1, 160]
],
}],
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 1,
groupPadding: 0,
shadow: false,
},
},
tooltip: {
formatter() {
return this.y;
},
},
legend: {
enabled: false,
},
exporting: false,
credits: false,
});
Demo:
https://jsfiddle.net/BlackLabel/wtxd9y2f/
API reference:
https://api.highcharts.com/highcharts/series.column.pointRange
https://api.highcharts.com/highcharts/series.column.pointPlacement
Related
I am trying to have combined chart to display bar charts below my 2 pie series .
I am trying to push the 3 bars below "Chart Title" and I am not being to achieve this with different parameters like grouppadding in highcharts . First I need to reduce the space between Bars to make it 10 px may be and then need to push the entire bar series after Semidonut Pie .
Anyway to achieve this ...
This is roughly the coding I have :
<HighchartWrapper
chartOptions={{
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotBackgroundColor: null,
plotShadow: false,
height: 400,
width: 650,
},
tooltip: {
formatter: function () {
console.log('In tooltip:', this);
if (this.key === 'yoyfnbrev')
var txt1 = 'YOY Func Rev' + this.y;
return txt1;
},
},
plotOptions: {
pie: {
startAngle: -90,
endAngle: 90,
center: ['50%', '85%'],
size: '160%',
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
style: {
fontSize: '16px',
color: 'black',
style: {
fontFamily: "'Lato', sans-serif",
},
},
formatter: function () {
if (this.series.name === 'revthisyear')
return (
this.point.y.toFixed(0) + '%'
);
else if (this.series.name === 'revlastyear')
return this.point.y.toFixed(0) + '%';
},
},
},
},
bar: {
groupPadding: 0,
pointPadding: 0,
dataLabels: {
enabled: true,
},
},
xAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
title: {
text: null,
},
labels: {
enabled: false,
},
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
opposite: true,
title: {
text: null,
},
labels: {
enabled: false,
},
},
series: [
{
type: 'pie',
name: 'revlastyear',
innerSize: '40%',
data: [20,40,40],
colors: ['#1a7ead', '#e95326', '#008540'],
dataLabels: {
enabled: true,
// inside: true,
distance: -140,
},
},
{
type: 'pie',
name: 'revthisyear',
innerSize: '60%',
data: [[10, 70, 20],
colors: ['#1a7ead', '#e95326', '#008540'],
dataLabels: {
enabled: true,
// inside: false,
distance: -60,
},
},
{
type: 'bar',
name: 'yoyrev',
// innerSize: '10%',
data: [20, -100, -50],
colors: ['#1a7ead', '#e95326', '#008540'],
pointWidth: 10,
pointPadding: 0,
groupPadding: 0.3,
},
],
}}
/>
I think that a good solution will be to use independent yAxis and xAxis for this bar, set a smaller height for them and change the pie centre values. See:
xAxis: [{
gridLineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
title: {
text: null,
},
labels: {
enabled: false,
},
}, {
height: '20%'
}],
Demo: https://jsfiddle.net/BlackLabel/jc3fLvt1/1/
API: https://api.highcharts.com/highcharts/series.pie.center
API: https://api.highcharts.com/highcharts/series.bar.yAxis
The simplest solution is to create another chart:
Highcharts.chart('container', {
...,
series: [{
type: 'pie',
...
}]
});
Highcharts.chart('container2', {
...,
series: [{
type: 'bar',
...
}]
});
Live demo: http://jsfiddle.net/BlackLabel/r9yz6qdk/
I have two circle pie charts, they're looking good but I need to change the background color of the inner core:
$(document).ready(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
//backgroundColor: 'rgba(255, 255, 255, 0.0)',
//backgroundColor: 'rgba(255, 255, 255, 0.0)',
backgroundColor: '#FCFFC5',
margin: [0, 0, 0, 0],
spacingTop: 23,
spacingBottom: 23,
spacingLeft: 23,
spacingRight: 23,
plotBorderWidth: 1,
//polar: true,
//type: 'inline'
},
exporting: { enabled: false },
credits: {
enabled: false
},
plotOptions: {
size: '100%',
series: {
states: {
hover: {
enabled: false
}
}
},
pie: {
innerSize: 100,
backgroundColor: '#CCC',
depth: 15,
dataLabels: {
connectorWidth: 0
}
}
},
tooltip: {
enabled: false
//pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
title: {
text: '<div style="background-color:#2cb5e1;">Today WalkIn<br>67<br>Average wait time<br> 02:00</div>',
align: 'center',
verticalAlign: 'middle',
y: 5,
style: {
color: '#000',
fontWeight: 'bold',
fontSize: '28px',
}
},
legend: {
layout: "vertical",
align: "right",
verticalAlign: "middle",
},
series: { states: { hover: { enabled: false } } },
series: [{
type: 'pie',
dataLabels: false,
shadow: false,
data: [{
name: '',
y: 7,
color: '#fc525a',
}, {
name: '',
y: 5,
color: '#2cb5e1',
}, {
name: '',
y: 18,
color: '#fc8b4d',
}],
innerSize: '65%'
},
{
type: 'pie',
data: [{
name: '',
y: 7,
color: '#fc525a',
}, {
name: '',
y: 5,
color: '#2cb5e1',
}, {
name: '',
y: 18,
color: '#fc8b4d',
}],
innerSize: '80%'
}]
});
});
yellow color background comes out of the two pie chart circles; instead, I wanted to display the color only where text has been placed
Screenshot
You need to draw a custom shape, for example:
chart: {
...,
events: {
load: function() {
var x = this.chartWidth / 2,
y = this.chartHeight / 2,
r = x > y ? y : x;
this.renderer
.circle(x, y, 0.65 * r)
.attr('fill', '#F0F')
.add()
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/apmvgnb4/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#circle
I use Highchart with areaspline type and my problem is the area is got be blacked or gray based on fillOpacity in plotOptionsp property. I use this in different syntax type but the result is same.
For example :
plotOptions: {
area: {
fillOpacity: 0.5,
},
}
or :
plotOptions: {
series: {
fillOpacity: 0.5,
},
}
You can see the screenshot of result:
And here is my code:
chart: {
type: 'areaspline'
},
title: {
text: 'Average fruit consumption during one week'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
plotBands: [{ // visualize the weekend
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'John',
data: [3, 4, 3, 5, 4, 10, 12]
}, {
name: 'Jane',
data: [1, 3, 4, 3, 3, 5, 4]
}]
What should I do to resolve this problem?
I want to fill area color above the spline in area spline chart.
I have tried to set negative fill color but no result.
Can anyone let me know how to fill area color above the spline rather then below?
Any help will be appreciated.
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Average fruit consumption during one week'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF'
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
plotBands: [{ // visualize the weekend
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)',
}]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'John',
data: [3, 4, 3, 5, 4, 10, 12],
negativeFillColor: '#000000'
}, {
name: 'Jane',
data: [1, 3, 4, 3, 3, 5, 4],
negativeFillColor: '#000000'
}]
});
})
;
Thanks,
M
Well, threshold should work. Just you need to set
endOnTick: false
maxPadding: 0
threshold: max_value_in_data
See: http://jsfiddle.net/3bQne/1076/
Code:
var data = [3, 4, 3, 5, 4, 10, 12];
Array.prototype.max = function() {
return Math.max.apply(null, this);
}
$('#container').highcharts({
chart: {
type: 'areaspline'
},
yAxis: {
endOnTick: false,
maxPadding: 0
},
plotOptions: {
areaspline: {
threshold: data.max(),
}
},
series: [{
data: data,
negativeFillColor: 'rgba(255, 0, 0, 0.5)'
}]
});
I have a problem with a highcharts graph, regarding overlapping of multiple axes.
There are 2 types of series, one type column and one type line. I want the line type to be always above the others and never intersect them.
You may see my problem here:
http://jsfiddle.net/99tC7/
Anticipated thank you for any help provided.
$('#container').highcharts({
title: {
text: 'Title',
x: -20 //center
},
xAxis: {
categories: [ "5.11.13", "6.11.13", "7.11.13", "8.11.13", "9.11.13"],
labels: {
rotation: 270
}
},
yAxis: [{
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
title:{
text: "Number 1"
},
},
{
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
title:{
text: "Number 2"
},
opposite: true,
max:50,
minPadding:5,
}],
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0
},
tooltip: {
enabled: false
},
plotOptions: {
line: {
dataLabels: {
enabled: true,
formatter: function() {
return this.y +'%';
}
}
},
column: {
dataLabels: {
enabled: true,
formatter: function() {
return this.y;
}
}
}
},
series: [{
name: 'L1',
type: 'column',
color: '#FF0000',
yAxis: 0,
data: [1, 5, 9, 10, 12]
},
{
name: 'L2',
type: 'column',
color: '#00FF00',
yAxis: 0,
data: [16, 16, 106, 12, 11]
},
{
name: 'L3',
yAxis: 1,
data: [38, 24, 37, 29, 37]
}
]
});
You can try to set correct min/max values in both yAxis like here http://jsfiddle.net/99tC7/1/