Related
I received a mockup of a graph using an areaspline (ignoring the column chart):
I have two questions that I can't seem to find any configuration that would satisfy the requirements.
Is there a way to extend the lines to the edge of the graph based on their trending slope, or possibly just a little above or below the end point? On a graph like this, it wouldn't look bad to omit those edge lines, but on a graph in the same area with only 3 data points, the whitespace is much more noticeable.
I have the y-axis labels stepping every other, but I can't seem to find a way to hide the first label ($0) in this case. Aside from just hiding the text element itself, is there a configuration to do this?
Edit: Here's an example of my configuration:
var themeColors = {
primaryColor: '#067bc2', //dark blue
secondaryColor: '#6a61a7', //dark purple
tertiaryColor: '#5ccadc', //turquoise
darkGray: '#37383e', //dark gray
mediumGray: '#919aa2', //medium gray
mediumLightGray: '#c9d3dc', //medium blue gray
lightGray: '#eaf1f8', //light blue gray (hover color)
primaryRed: '#e54443',
secondaryRed: '#e54443',
primaryGreen: '#2bbb2d',
secondaryGreen: '#2bbb2d',
primaryOrange: '#ffa883', //peach
primaryBackground: '#fafcfe',//light blue
secondaryBackground: '#ffffff',
primaryText: '#37383e', //dark gray
secondaryText: '#919aa2', //medium gray
selectedColor: '#f5fafd' //light blue, slightly darker than background
};
var colors = [
themeColors.secondaryColor,
themeColors.tertiaryColor,
themeColors.primaryOrange
];
(function renderChart(series) {
var options = {
chart: {
height: 400,
spacing: [0,0,0,0],
type: 'areaspline',
},
colors: colors,
credits: { enabled: false },
legend: {
align: 'left',
itemStyle: {
color: themeColors.secondaryText,
fontSize: '12px',
fontWeight: 'normal',
},
margin: 30,
symbolHeight: 14,
symbolRadius: 0,
symbolWidth: 14,
},
plotOptions: {
areaspline: {
marker: {
fillColor: themeColors.secondaryBackground,
lineColor: null,
lineWidth: 2,
radius: 3,
symbol: 'circle',
}
}
},
title: { text: null },
xAxis: {
categories: ['first', 'second', 'third'],
crosshair: {
color: Highcharts.color(themeColors.lightGray).setOpacity(.5).get('rgba'),
width: 12
},
labels: {
style: {
color: themeColors.secondaryText,
fontSize: '12px'
}
},
lineColor: themeColors.lightGray,
tickColor: themeColors.lightGray,
tickWidth: 0,
},
yAxis: {
gridLineColor: themeColors.lightGray,
labels: {
align: 'left',
step: 2,
style: {
color: themeColors.secondaryText,
fontSize: '12px'
},
x: 0,
y: 12,
},
lineColor: themeColors.lightGray,
tickColor: themeColors.lightGray,
title: { text: null },
},
};
series.forEach((s,i)=>{
s.fillColor = {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.color(colors[i]).setOpacity(0.1).get('rgba')],
[1, Highcharts.color(colors[i]).setOpacity(0).get('rgba')]
]
};
});
options.series = series;
Highcharts.chart('container',options);
})([
{ name: 'a', data:[1,4,2] },
{ name: 'b', data:[3,1,2] }
]);
jsFiddle: https://jsfiddle.net/mtowj6ng/
Thanks!!
You can set min and max of the axis.
xAxis: {
categories: ['first', 'second', 'third'],
min: 0.5,
max: 1.5,
If you have 3 categories, the axis range will be 0 - 2, so you can increase the min and decrease the max in the amount of 0.5 (the middle of the category).
You can also do it dynamically by updating the xAxis with xAxis.update on chart load.
chart: {
events: {
load: function () {
const min = Math.min.apply(null, this.series[0].xData)
const max = Math.max.apply(null, this.series[0].xData)
this.xAxis[0].update({
min: min + 0.5,
max: max - 0.5
})
}
}
},
You can also do it before you render the chart.
Set yAxis.showFirstLabel to false.
example: https://jsfiddle.net/bbd3pu9j/
I have a solid gauge that looks like this: https://jsfiddle.net/fb5Ltxbt/
These are the requirements I've achieved thus far:
Gauge range of 0 to 50
If value < 40, show in red, else in green
Display major ticks
This is what I want to add if it's possible:
Something to indicate Y-Axis stops as defined in the code
In other words, what I want is to ADD something like the "250" indicator from the following image:
It doesn't have to be an additional number, just something, anything, that marks each stop.
JSFiddle source code below:
var gaugeOptions = {
chart: {
type: 'solidgauge',
backgroundColor: null
},
title: null,
pane: {
center: ['35%', '75%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: 'white',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
// Add something to indicate each of these stops
stops: [
[0.8, 'red'],
[1.0, 'green']
],
lineWidth: 0,
tickInterval: 10, // Keep the labels for these ticks
minorTickInterval: 2.5,
title: null,
labels: {
y: -5,
style: {
'color': 'black',
'fontWeight': 'bold'
}
}
}
};
var chart = Highcharts.chart('chartContainer', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 50,
title: null
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'ABC',
data: [30],
dataLabels: {
formatter: function() {
return this.point.y;
},
y: -20,
style: {
textShadow: false,
'color': 'black',
'fontSize': '2em'
},
borderWidth: 0
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div style="width: 1024px; height: 768px; margin: 0;">
<div id="chartContainer"></div>
</div>
I have seen how to make specific labels outside gauge chart but it requires all normal ticks to be removed. I'd don't want them to be removed if possible but please say so if what I want is not possible too, thanks!
You can an additional yAxis to achieve additional ticks. The additional axis should be linked to the main axis. Then, it has the same scale as the main axis and you gain control over additional, independent ticks - you define specific ticks via tickPositions.
{
linkedTo: 0,
lineWidth: 0,
minorTickLength: 0,
tickPositions: [35],
tickLength: 75,
labels: {
x: 30,
y: -30,
style: {
fontSize: '25px'
}
}
}]
Live example and output
https://jsfiddle.net/ym2tvzy7/
If you want ticks with different color and styles, you can add more axes.
https://jsfiddle.net/ym2tvzy7/1/
If i understand your requirements correctly
May be this will help not exactly as your requirement anyway as an alternative
You can also try :-
plotBands: [{
from: 39.5,
to: 40.5,
color: '#55BF3B' // green
}]
var gaugeOptions = {
chart: {
type: 'solidgauge',
backgroundColor: null
},
title: null,
pane: {
center: ['35%', '75%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: 'white',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.8, 'red'],
[1.0, 'green']
],
lineWidth: 0,
tickInterval: 10,
minorTickInterval: 2.5,
title: null,
labels: {
y: -5,
style: {
'color': 'black',
'fontWeight': 'bold'
}
}
}
};
var chart = Highcharts.chart('chartContainer', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 50,
title: null,
plotBands: [{
from: 0,
to: 40,
color: '#55BF3B' // green
}]
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'ABC',
data: [31],
dataLabels: {
formatter: function() {
return this.point.y;
},
y: -20,
style: {
textShadow: false,
'color': 'black',
'fontSize': '2em'
},
borderWidth: 0
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div style="width: 1024px; height: 768px; margin: 0;">
<div id="chartContainer"></div>
</div>
I'm creating a polar area chart in Highcharts. I'm having issues with the labels being positioned inside the chart. See an example here:
$('#container').highcharts({
chart: {
polar: true,
backgroundColor: 'transparent',
plotBorderWidth: null,
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title:{
text:''
},
subTitle:{
text:''
},
pane: {
startAngle: 0,
endAngle: 360
},
legend: {
enabled: false
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
lineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
},
yAxis: {
min: 0,
lineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45,
pointPlacement: 'between',
states: {
hover: {
enabled: true
}
},
dataLabels: {
enabled: true,
format: '<span class="wheel-label" style="color: {point.color}">{point.name}</span>',
style: {
textShadow: false,
width: 150,
fontSize: "16px"
},
}
},
column: {
pointPadding: 0,
groupPadding: 0,
borderWidth: borderWidth
},
},
series: [{
showInLegend: false,
type: 'column',
name: 'Column',
data: data
}],
credits: {
enabled: false
}
});
http://jsfiddle.net/c904atb3/
I notice with the pie charts there are options for "distance" but no such option exists for the polar chart. I'd also like to be able to use "connectors" if possible but I don't see this available for polar either. How can I get more control over these labels?
I've had similar problems getting labels to be "pushed" out from the borders of a polar/spider chart. The way I solved this was to use plot bands to put a ring around the outside rim.
My test can be found here: http://jsfiddle.net/brightmatrix/j3v0zstk/
In this case, I added the following line to your yAxis:
plotBands: [ { from: 8, to: 15, color: '#FFFFFF', zIndex: 5 } ]
The values I used are merely for illustration. If you wanted the colored wedges in your chart to truly go out to 10, define a max value for your yAxis and have the plot bands cover what would extend past the chart edges.
The zIndex value of "5" makes sure the plot bands sit on top of your chart wedges to give the desired effect.
I hope this is helpful!
I managed to fix it by allowing the labels to extend outside the container, then setting the container to overflow:visible. Not ideal but it works.
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
padding: 50,
useHTML: true,
verticalAlign: 'middle',
format: '<div class="wheel-label" style="color: {point.color}">{point.name}</div>',
style: {
textShadow: false,
width: 250,
fontSize: '22px'
},
}
http://jsfiddle.net/c904atb3/2/
In my production code I added a CSS class to each label based on the name so I can tweak positioning in CSS.
You can set label's coordinates like this:
var data = [{
name: "Label 1",
dataLabels: {
x:100,
y:100
},
y: 10,
color: "#9fe642"
},
http://jsfiddle.net/c904atb3/1/
I am using highcharts pie chart and needs to change the tooltip position
to where the mouse is on while it's over the chart.
Currently I tried to change it's position but it's not working.
Here is how i tried to create and use the chart:
chartObj = new Highcharts.Chart({
chart: {
renderTo: container,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
animation: false,
backgroundColor: '#e4e6e1',
height: 300
},
colors: colors,
title: {
text: title
},
tooltip: {
positioner: function (boxWidth, boxHeight, point) {
return { x: point.plotX + this.chart.plotLeft, y: point.plotY + this.chart.plotTop };
},
pointFormat: '<b>{point.percentage}%</b>',
percentageDecimals: 1,
style: {
color: '#333333',
fontSize: '12px',
padding: '8px',
opacity: 1
}
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: width < 1500 ? false : true,
color:'#000000',
useHTML: true,
formatter: function () { return this.percentage.toFixed(2) + "%"; },
connectorWidth: 0,
distance: 5
},
showInLegend: true,
color: '#000000',
connectorColor: '#000000',
point: {
events: {
legendItemClick: function () {
return false;
}
}
},
},
},
series: [{ type: 'pie',
name: title,
visible: chart_visible,
data: data,
}],
credits: {
enabled: false
},
legend: {
layout: 'horizontal',
backgroundColor: '#FFFFFF',
align: 'center',
verticalAlign: 'bottom',
x: 0,
y: 0,
floating: false,
shadow: true
},
exporting: {
enabled: false
}
});
chartObj.series[0].setData(data);
return chartObj;
Unfortunately point.x and point.y are always the same for pie slice - they are not mouse position.
Possible workaroud is to use points.event.mouseOver and mouseOut and create your own tooltip (display some absolute with values from that event).
I'm looking for a way to have text in the center of a donut chart change on hover. When there is no hover state, the center will display the total amount (here I am representing vacation days, so it may be 15 vacation days). When hovering, the text in the center needs to match the segment hovered over (available, requested, and taken vacation days), but I cannot figure out how to change the text in the center based on hover. Does anyone have any ideas? Any help is greatly appreciated!!
http://jsfiddle.net/NVX3S/146/
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container1" style="min-width: 300px; height: 300px; margin: 0 auto"></div>
$(function () {
var colors = ['#8d62a0', '#ceb3d8', '#d5dddd'];
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'pie',
height: 250,
width: 250,
borderRadius: 0
},
credits: {
enabled: false
},
title: false,
tooltip: false,
plotOptions: {
pie: {
borderWidth: 6,
startAngle: 90,
innerSize: '55%',
size: '100%',
shadow: true,
// {
// color: '#000000',
// offsetX: 0,
// offsetY: 2,
// opacity: 0.7,
// width: 3
// },
dataLabels: false,
stickyTracking: false,
states: {
hover: {
enabled: true
}
}
}
},
series: [{
data: [
{y:65, color: colors[0]},
{y:15, color: colors[1]},
{y:20, color: colors[2]}
]
// data: [
// ['Firefox', 44.2],
// ['IE7', 26.6],
// ['IE6', 20],
// ['Chrome', 3.1],
// ['Other', 5.4]
// ]
}]
},
function(chart) { // on complete
var xpos = '50%';
var ypos = '53%';
var circleradius = 102;
// Render the text
chart.renderer.text('126.5', 103, 127).css({
width: circleradius*2,
color: '#4572A7',
fontSize: '16px',
textAlign: 'center'
}).attr({
// why doesn't zIndex get the text in front of the chart?
zIndex: 999
}).add();
});
});
Use points.events.mouseOver/mouseOut, for example: http://jsfiddle.net/NVX3S/147/
Code:
point: {
events: {
mouseOver: function(){
this.series.chart.innerText.attr({text: this.y});
},
mouseOut: function(){
this.series.chart.innerText.attr({text: 112});
}
}
}
Where innerText is just custom property, created like this:
chart.innerText = chart.renderer.text('112', 112, 125).css({ ... }).add();