How do I make a slight shadow or color come up below the x axis for zero valued points in column charts?
Right Now nothing is shown.
Setting the minPointLength property makes a line come up above the x Axis.
Any help or pointers would help.
Below are my options:
plotOptions: {
column: {
shadow: false,
pointWidth: 11.5,
borderWidth: 0.5,
enableMouseTracking: false,
minPointLength: 1
}
},
yAxis: {
labels: {
align: 'left',
style: {
color: 'gray',
fontWeight: 'normal',
fontSize: '8.5px',
fontFamily: 'Arial'
}
},
minorGridLineWidth: 1,
minorTickInterval: 10000,
minorGridLineColor: 'white',
minorTickWidth: 0,
title: {
text: '',
rotation: 270.0,
style: {
fontWeight: 'normal'
},
margin: 20,
style: {
fontWeight: 'normal',
fontFamily: 'Arial',
color: '#666666',
fontSize: '11px'
}
},
opposite: true,
min: 0,
max: 500000,
tickInterval: 100000,
gridLineWidth: 0.0
}
This gives me a 1px point above x Axis.
But what I am looking for is a small shadow/1px point below the xAxis.
The only way I have found to accomplish something like this is to convert 0 values to negative values (I have most often done something where I have a very small column that goes from -1 to 1, straddling the 0 line)
How large of a spread your data has will determine what negative value you need to specify.
http://jsfiddle.net/jlbriggs/JVNjs/307/
data: [7,12,16,-1,32,64]
{{Edit:
updated example with startOnTick:false - http://jsfiddle.net/jlbriggs/JVNjs/309/
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/
Is there a way to combine different y axes into one?
I have 23 data sets that I want to display on the same line graph and I want it to only have one y axis, despite the fact that the different lines' values highly differ (for example, points in one line can fluctuate around 50 000 and in another line around 5 or 6).
What I am looking for is this:
You can mock multiple y axes to be shown as one. One main axis should have line and ticks, the other should not - you can set that with tickWidth, tickLength and lineWidth options (for each axis separately).
Then you need to set vertical position of the axes by setting their offset to 0. You also need adjust their min, max and tickPositions to fit the data.
Example of the axes config:
yAxis: [{ // Primary yAxis
min: 4.5,
max: 27.5,
tickPositions: [7, 25],
startOnTick: false,
endOnTick: false,
gridLineWidth: 0,
offset: 0,
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: null
},
}, { // Secondary yAxis
gridLineWidth: 0,
offset: 0,
title: {
text: null
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
lineWidth: 1,
tickLength: 10,
tickWidth: 1,
tickPositions: [49.9, 220]
}, { // Tertiary yAxis
gridLineWidth: 0,
endOnTick: false,
startOnTick: false,
min: 1009,
max: 1018.5,
tickPositions: [1009.5, 1018],
offset: 0,
title: {
text: null
},
labels: {
format: '{value} mb',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}],
example: http://jsfiddle.net/w7z1p8qy/
...or what is my fault?
I am trying to set the yAxis.max values on both axis. But it doesn't work.
The left yAxis should go from 330-410 with a tickInterval of 10, the right one from -0.6-1,1 with a tickInterval of 0.1.
Here is a fiddle.
yAxis: [{
labels: {
style: {
color: "#4553c5"
}
},
title: {
text: "ppm",
align: "high",
rotation: 0,
x: 10,
y: -30,
textAlign: 'left',
style: {
color: "#4553c5"
}
},
min: 330,
max: 410,
tickInterval: 10,
gridLineWidth: 1,
gridLineColor: '#efefef',
endOnTick: false
}, {
labels: {
style: {
color: "#ec5d61"
}
},
title: {
text: "°C Anomaly",
align: "high",
rotation: 0,
textAlign: "right",
x: -10,
y: -30,
style: {
color: "#ec5d61"
}
},
min: -0.6,
max: 1.1,
tickInterval: 0.2,
gridLineWidth: 1,
gridLineColor: '#efefef',
opposite: true,
endOnTick: false
}],
What is wrong with it? Thanks for any hints!
When using a dual axis, min and max get confounded by the default alignTicks setting.
Setting alignTicks to false will usually fix the problem
chart: {
alignTicks: false
},
Example:
http://jsfiddle.net/jlbriggs/9hnx0w46/6/
OTOH, using a dual y-axis chart like this is generally a bad idea, as it confounds two series whose interactions don't mean anything, since they are being measured on two different scales.
Useful read on the subject:
https://www.perceptualedge.com/articles/visual_business.../dual-scaled_axes.pdf
When you use multiple yAxis, min and max values usually calculated by HighCharts and these calculated values overrides your settings.
The trick is using tickAmount, startOnTick and endOnTick together.
Here is the solution of your problem: jsFiddle
I've got a chart where there are multiple yAxes and labels that overlap. I cannot instantiate them with different x values because I've got a UI that will switch the axes on and off, so that would leave weird spacing to one of the labels. I want to use formatter to detect if the label is not a first label and then change the x value then, but I have trouble finding how to change the value in formatter callback. Below is my code
{
title: 'Count',
gridLineDashStyle: 'Dash',
gridLineColor: '#e8ebef',
showFirstLabel: false,
labels: {
enabled: true,
align: 'right',
x: 5,
y: 15,
style: {
fontFamily: fontFamily,
fontSize: '10px',
fontWeight: 'bold',
color: '#8596a5'
}
},
opposite: true,
allowDecimals: true,
min: 0,
minRange: 2 // Ensures flat charts don't show line at the bottom
},
{
title: 'Cost',
gridLineDashStyle: 'Dash',
gridLineColor: '#e8ebef',
showFirstLabel: false,
labels: {
enabled: true,
align: 'left',
x: 5,
y: 15,
style: {
fontFamily: fontFamily,
fontSize: '10px',
fontWeight: 'bold',
color: '#8596a5'
},
formatter: function() {
if ( this.isFirst ) { console.log("first") }
this.attr({ x:44 })
}
},
allowDecimals: true,
min: 0,
minRange: 2 // Ensures flat charts don't show line at the bottom
},
Any ideas?
Both of your yAxis should have order in which you want to show them.YAxis needs to be stacked. Use
yAxis:0, //for first series
yAxis:1 //for second series
I Will add a fiddle in few mins.
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/