I'm checking through the documentation and don't really see a way to do this.
What I'd like to do is position the chart title to the right of the chart, rotated 90 degrees and centered vertically.
So something like this (used Photoshop to represent rotation):
I know I can set the x, and y position like this:
title: {
text: 'Chart title',
align: 'right',
y: 140,
x: 50,
rotation: 90 //this does not work
}
But that doesn't really give me what I want. Is there a setting that I'm not finding to position the title on the right, and rotate it 90 degrees?
Here is a fiddle I was messing with for the x, y axis positioning:
http://jsfiddle.net/c2tb1p5b/1/
You can do this using a combination of x, y placement on the title along with CSS - you will need to mess around with the exact values but something like this should work:
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Chart title',
align: 'right',
y:-480,
x:-280
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels: {
step: 1
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
CSS:
.highcharts-title {
transform: rotate(90deg);
}
http://jsfiddle.net/c2tb1p5b/2/
Related
I have an issue with setting annotations above plot area. When I inspect chart in the console I see that annotation is rendered it's just label doesn't show up.
I browsed highcharts forum and found this topic: https://www.highcharts.com/forum/viewtopic.php?t=39918 where #ppotaczek created livedemo http://jsfiddle.net/ppotaczek/j4m2vzaa/ to answer someone's question, and i think I have a similar situation. Am I missing something?
Can someone suggest me a workaround? Thanks!
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
]
},
title: {
text: 'Highcharts Annotations'
},
series: [{
data: [{
y: 29.9,
id: 'min'
}, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, {
y: 216.4,
id: 'max'
}, 194.1, 95.6, 54.4]
}],
annotations: [{
labelOptions: {
backgroundColor: 'rgba(255,255,255,0.5)',
verticalAlign: 'top'
},
labels: [{
y: 55,
point: {
xAxis: 0,
yAxis: 0,
x: 1,
y: 0
},
text: 'label1'
}, {
y: 55,
point: {
xAxis: 0,
yAxis: 0,
x: 3,
y: 0
},
text: 'label2',
backgroundColor: 'white'
}]
}]
});
]1
Thank you for sharing this issue, it is a regression. I just reported this bug on Highcharts GitHub issue channel.
https://github.com/highcharts/highcharts/issues/12897
If you need temporary workaround please ask about it in the comment under the above link. The core developers should respond to you quickly.
Is there a solution in Highcharts to format a Label depending on the value?
I know there are color zones option for the dependent formatting of columns based on the value of the data. For example, if the value is bigger than 10 the column turns red, else remains the base color.
I need to get very similar function on the dataLabels. If the value is bigger than 10 turn the label background to red. If this is possible do exist a solution to dynamically get this specific value from the data series, or only can be/ should be a static setting?
Values bigger than 100 should have red dataLabel background color, and the rest (smaller) green background color:
https://jsfiddle.net/saboarpad/6bow3mx1/3/
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
backgroundColor:'red',
color:'white'
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
You can edit data labels style after they have been generated:
chart: {
events: {
load: function() {
var points = this.series[0].points;
points.forEach(function(point) {
if (point.y > 100) {
point.dataLabel.text.css({
'color': 'white',
'background-color': 'red'
});
}
});
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/h64gjL2t/
Also, you can individually format dataLabel for each point: https://jsfiddle.net/BlackLabel/4k8p6mfg/
series: [{
data: [{
x: 0,
y: 29.9,
dataLabels: {
backgroundColor: 'red',
color: 'white'
}
},
71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4
]
}]
API: https://api.highcharts.com/highcharts/series.line.data.dataLabels
I find a similar solution, but not clear the use of the code.
In the dataLabels nod there is this "formatter" function which defines the color code based on the this.y value, so here We can do some compare of data: which one is bigger or smaller, and the function returns the color code and concatenates into a HTML span elements inline style.
However, everything is work until is use the plain "color" tag, but this is for the color of the fonts. I needed to change the a background as well. So I changed the color tag to:
1. Highcharts own tag: "backgroundColor" -- nothing happens
2. HMTL back ground color tag: "background-color" -- nothing happens
:( Im feel kind of lost.
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
color: 'blue',
formatter: function() {
var color = this.y > 100 ? 'red': 'green'
return '<span style="color: ' + color + '">' + this.y + '</span>';
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
I'm using highcharts to display stackbars graph.
I'd the y axis label to appear on top of the y axis, that's why I'm setting its offset to -10. however, when the graph's title is not displayed I cannot see the axis label.
Here's an example with graph title and axis title
Here's an example without graph title and from some reason axis title disappears
Here's how I set my yAxis label:
yAxis: {
lineWidth: 2,
tickWidth: 1,
title: {
align: 'high',
offset: 0,
text: 'Rainfall (mm)',
rotation: 0,
y: -20
}
},
updated Link
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
margin: [70, 0]
},
title: {
text: ''
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
lineWidth: 1,
tickWidth: 1,
title: {
align: 'high',
offset: 0,
text: 'Rainfall (mm)',
rotation: 0,
y: -10
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
margin: [70, 0]
I'm trying to put Y-Axis title on top right of the Y-Axis, right below the chart title. However, when I insert the axis title, the whole graph moves to the right. I tried to used spacingLeft to set the position of the chart, but nothing changes. Is there a way to keep the position of the chart even if I add the axis title?
Here is my code:
$(function () {
$('#container').highcharts({
chart: {
marginBottom: 80,
spacingTop: 20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
title: {
text: 'Chart title',
y: -10
},
yAxis: {
title: {
text: 'aaaaaaaaaaaaaaaaaaa',
align: 'high',
rotation: 0,
x: 100,
y:-20
},
labels: {
align: 'high',
x: 0,
y: -5
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
jsfiddle: http://jsfiddle.net/8m7rc/1/
Min Sun Song, you can use offset property to reduce that gap.
offset: -120,
I've updated you fiddle here
Hope this is what you are looking for.
You can set marginLeft property for a chart. See demo.
I've spent some time poking around the API documentation, and I don't see a simple solution to my problem. This is what I'm looking for:
In a chart, I can set each line to be a different color I choose like
colors: [ 'red', 'green', 'blue ]
But what if I want the points to be different colors than the line?
I know I can set the
plotOptions: {
series: {
marker: {
fillColor: 'yellow',
lineColor: 'yellow'
}
}
},
But what if I want each point marker to be a different color? (For instance, I want the blue line to have dark blue points, the red line the have dark red points, and the green line to have dark green points.
I think I want to do something along the lines of
borderColors: [ 'darkBlue', 'darkGreen', 'darkRed' ]
or whatever and the same with fillColors...
Is there any way I can do this easily that I've missed.
Thanks!
Define the marker in the series...
I found this in the api:Highchart symbol api
Which links to this fiddle:
High char jsfiddle
changed the code to work with colour:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 316.4, 294.1, 195.6, 154.4],
marker: {
fillColor: '#f11',
lineWidth: 2,
lineColor: '999'
}
}, {
data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5],
marker: {
fillColor: '#999',
lineWidth: 2,
lineColor: '#111'
}
}]
});
});
You can specify the line color and the marker color for each series explicitly.
Series Color Sets the color to the series.
Markers Color sets the color to every point in the series.
Demo .