I am making a Highstock chart using Highcharts, I need the title on the top left corner, just like Highcharts does.
In highcharts I can do it using yAxis.title.align: 'high', as you can see in this snippet
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'yAxis.title.offset is set to zero'
},
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]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
This doesn't work in a Highstock chart, using same options, as you can see on the following snippet:
Highcharts.stockChart('container', {
chart: {
type: 'column'
},
title: {
text: 'title offset is set to zero and align is high'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
lineWidth: 1,
tickWidth: 1,
top: "10%",
height: "90%",
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]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="height: 400px"></div>
How can I aligne this text on the top-left side?
Related
Example code:
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
lineWidth: 8,
color: '#FF0000'
}
},
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]
}]
});
How can I set color and width for the border of the line?
I need the line appearing like this one:
You can achieve line series with a border by adding additional series with the same data array that is linked to the main one. Then just set greater lineWidth and different color.
Code:
const 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];
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
lineWidth: 5,
color: '#000',
marker: {
enabled: false
},
data: data,
linkedTo: 'main'
}, {
lineWidth: 2,
id: 'main',
color: '#FF0000',
name: 'Test',
marker: {
enabled: false
},
states: {
hover: {
lineWidthPlus: 0
}
},
data: data
}]
});
Demo:
https://jsfiddle.net/BlackLabel/d1m4feyx/
API reference:
https://api.highcharts.com/highcharts/series.line.linkedTo
It looks like Highcharts has added more explicit support for annotations in version 6.0.0 but it doesn't seem to be working. Trying the example right of their website but the described annotations are not appearing on the chart.
Below is the code taken directly from the website:
$(function () {
console.log('ready ', Highcharts.version);
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: [{
labels: [{
point: 'max',
text: 'Max'
}, {
point: 'min',
text: 'Min',
backgroundColor: 'white'
}]
}]
});
}
)
Found the problem. You need to also require or include a script tag for 'annotations.js' in addition to highcharts.js
How can we add content above every series like a html content .for ex - My Content. I am using line chart.
here is an example which i found in api.
jsFiddle: http://jsfiddle.net/ekec5nut/
$(function () {
$('#container').highcharts({
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, 216.4, 194.1, 95.6, 54.4]
}]
}, function (chart) { // on complete
chart.renderer.text('Series 1', 90, 150)
.attr({
rotation: 0
})
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
});
});
but I do not want to give position like this : chart.renderer.text('Series 1', 90, 150) . I want is to have the content above each series while series are getting created.
How about simply using dataLabels for first point? Just like this:
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [
{
dataLabels: {
enabled: true,
formatter: function() { return 'My Content'; }
},
y: 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 have a line graph where Y values are -10 to +60. I would like to style the y=0 line to stand out from other grid lines.
Is this possible?
Thanks.
Take a look at the plotLines API in the yAxis...
http://api.highcharts.com/highcharts#yAxis.plotLines
Example...
http://jsfiddle.net/48dUL/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yAxis: {
plotLines: [{
color: '#C0C0C0',
width: 5,
value: 0
}]
},
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]
}]
});
});
http://jsfiddle.net/nUCBj/1/
How can I prevent the datalabels from overlapping? I have tried using the formatter option and positioning the dataLabel using CSS position/top/bottom, etc... The datalabels are required. I can't just use the tooltip in it's place :-)
Thank you,
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
backgroundColor: 'rgba(255, 255, 255, 0.7)',
borderWidth: 1,
shadow: true,
borderRadius: 1,
useHTML: true,
padding: 1
}
}
},
series: [{
name: 'test',
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] },{
name: 'test2',
data: [31, 80, 106.4, 22, 150, 17, 135.7, 14, 230, 181, 9, 54]
}]
});
});
The data attribute in the series can be passed in as an array of objects instead of as an array of numbers. Each object can define it's own dataLabels options (http://api.highcharts.com/highcharts#series.data). For the first series you can align the points to the left, and the second to the right so they do not overlap.