highchart js half width line on zero (x axis) - highcharts

I want 15px line on zero. But only half on zero. What's problem?
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
lineWidth: 15
}
},
series: [{
data: [29.9, 71.5, 0, 0, 0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
For example: http://jsfiddle.net/9mzrey5n/

Related

how to plot square shape highchart?

am trying to plot a line graph in highchart but its rectangle in shape, how to make it in square shape.
code here
Highcharts.chart('container', {
chart: {
type: 'area'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
fillOpacity: 0.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]
}]
});
Should be something like above img

set line border properties (color/width) in a Highcharts line chart

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

How to add html content above series(Chart type - line)

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]
}]
});

Highcharts: Avoid showing extra x axis points when max x-axis value defined

I have a Highchart where i am showing a scrollbar. i have defined the
xAxis: {
min:0,
max:6,
For instances where data is less than 6 grids..it shows extra points with null. How to avoid showing those extra points?
In the below example see the extra points are 12,13, 14..I want to remove them.
http://jsfiddle.net/highcharts/fj6d2/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
min: 0,
max: 14
},
legend: {
verticalAlign: 'top',
y: 100,
align: 'right'
},
scrollbar: {
enabled: true
},
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 simply get length of data, and then set proper max, see: http://jsfiddle.net/Fusher/fj6d2/2378/
var 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],
len = data.length;
len = len < 6 ? len : 6;
Then in options for Highcharts:
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
min: len
},
series: [{
data: data
}]

Highcharts: Style Zero Y value

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]
}]
});
});

Resources