Highcharts: xAxis label of bar chart are overlapped - highcharts

How can I change height of the rows depending on the number of lines for labels?
Actual behavior
Expected behavior
You can see Highchart options below:
Options:
var options = {
chart: {
type: 'bar',
reflow: false,
plotOptions: {
series: {
minPointLength: 3,
dataLabels: {
enabled: true,
crop: false,
overflow: "none"
},
pointWidth: 20+11,
pointPadding: 5
}
},
xAxis: {
categories: xData,
labels: {
step: 1,
enabled: true,
style: {
fontSize: '100%',
color: '#000000'
}
}
}
};

Related

How to remove the stroke around the single points in a highcharts area. Highcharts

I have a plotted single point data on my highcharts with chart type ="area".
here is the code:
xtype: 'container',
ref: 'chartContainer',
height: 170,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'qxhighchart',
ref: '../confirmedChart',
cls: 'qx-highchart-ct severity-chart',
flex: 1,
showLegend: true,
chartConfig: Qx.chart.Highchart.Configs.get('area',
{
xAxis: {
labels: {
formatter: function () {
return this.value;
}
}
},
yAxis: {
labels: {
formatter: function () {
return this.value;
}
}
},
plotOptions: {
area: {
marker: {
enabled: true,
states: {
hover: {
enabled: true
}
}
}
},
series: {
allowPointSelect: true,
shadow: false,
dataLabels: {
enabled: false
},
marker: {
states: {
select: {
fillColor: "#FFFFFF",
radius: 5,
lineColor: null
}
}
}
}
},
series: [{
name: "A",
id: "a",
type: 'area',
color: '#d5bcfc',
lineColor: '#d5bcfc'
},{
name: "B",
id: "b",
type: 'area',
color: '#5da7e3',
lineColor: '#5da7e3'
}]
})
}]
The output of the is attached:
As you can see I'm getting a stoke fill with a blue color around the single points. I want to get rid of them. From the above code, I tried removing few properties but that didnt help.
here is what I'm expecting the look of single points something like below with all circle shapes
Any ideas around how to remove the border from the points?

You can remove a border (stroke) by setting plotOptions.series.marker.lineWidth = 0. To change all points to circle shape set plotOptions.series.marker.symbol = 'circle'.
Code:
plotOptions: {
series: {
marker: {
lineColor: null,
lineWidth: 0,
symbol: 'circle'
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/zLn8o2tf/
API reference:
https://api.highcharts.com/highcharts/plotOptions.series.marker.lineWidth
https://api.highcharts.com/highcharts/plotOptions.series.marker.symbol

Highcharts bug - label formatter function does not fire with multiple axis

I have a chart with multiple yAxis and I want to format each one differently. However, it seems with multiple yAxis, the label formatter function does not fire at all. Here's my options:
{
chart: {
backgroundColor: 'transparent',
pinchType: 'none',
height: 320,
events: {
load: (e) => {
}
}
},
plotOptions: {
line: {
states: {
hover: {
enabled: true
}
},
animation: {
duration: 750
}
},
series: {
lineWidth: 2,
}
},
series : [
{ name: 'charts',
type: 'line',
id: 0,
dataGrouping: {
groupPixelWidth: 8
},
},
{ name: 'marketcap',
type: 'line',
id: 1,
color: '#1fd3a3',
dataGrouping: {
groupPixelWidth: 8
},
},
{ name: 'volume',
type: 'area',
id: 2,
color: '#ddd',
lineWidth: 1,
dataGrouping: {
groupPixelWidth: 8
},
}
],
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
},
// responsive: {
// rules: [{
// condition: {
// maxWidth: 500
// },
// }]
// },
xAxis: {
// crosshair: {
// width: 1,
// color: 'rgba(255,255,255,.5)'
// },
visible: true,
type: 'datetime'
},
yAxis: [
{
opposite: false,
gridLineWidth: 0,
minorGridLineWidth: 0,
height: '75%',
tickAmount: 5,
labels: {
formatter: () => {
// this does not fire
console.log('firing!!');
return this.value
}
}
},
{
opposite: true,
gridLineWidth: 0,
minorGridLineWidth: 0,
height: '75%',
tickAmount: 5
},
{
top: '75%',
height: '25%',
opposite: false,
gridLineWidth: 0,
minorGridLineWidth: 0,
visible: false,
},
],
tooltip: {
followPointer: true,
shared: true,
},
credits: { enabled: false }
}
Notice that I have 3 yAxis, and within each of those I have different keys and values. I need to have a custom format for each, but when I try to use the formatter function, nothing happens. Using the format string value works, but it does not allow me to format the string the way I want. Any ideas?

How to set tick length in y-axis to 0 or remove tickline from y axis in highchart?

for x axis 'tickLength: 0' is working and I can remove the tick from x-axis label,but same thing not working for y axis. Please suggest me the right way to remove the y axis tick line.
$(function () {
Highcharts.setOptions({
colors: ['#C9F4F4']
});
$('.container').highcharts({
chart: {
type: 'area',
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'Jul','Aug','Sep','Oct','Nov','Dec'],
tickmarkPlacement: 'on',
overflow:'false',
gridLineWidth: 1,
//tickLength: 0,
startOnTick:true,
title: {
enabled: false
}
},
yAxis: {
min: 100,
max: 1000,
tickInterval: 100,
gridLineWidth: 1,
title: {
enabled: false
},
labels: {
formatter: function () {
return this.value;
}
}
},
tooltip: {
shared: true,
formatter: function () {
return this.y;
}
},
plotOptions: {
series: {
lineColor: '#00CFCF',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#00CFCF',
enabled: false,
}
}
},
navigation: {
buttonOptions: {
enabled: false
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 900, 1000, 1000,200,750,630,400,75]
}]
});
});
here is the JSFiddle

Is it the desired effect? http://jsfiddle.net/xznu95mv/5/
In xAxis part,
Change startOnTick: true, to startOnTick: false,
Add min: 0.5
Ref: How to remove the gap between yAxis and data?

How to truncate value in tooltip using highcharts

I have following code:
$(function () {
$('#container').highcharts({
chart: {
type: 'spline',
zoomType: 'xy',
borderRadius: 20,
borderWidth: 2,
},
credits: {
enabled: false
},
title: {
text: 'CO2 (Latest 7-days)'
},
exporting: {
enabled: false
},
xAxis: {
type: 'datetime',
labels: {
overflow: 'justify'
},
startOnTick: true,
showFirstLabel: true,
endOnTick: true,
showLastLabel: true,
categories: dateAndTimeArray,
tickInterval: 10,
labels: {
formatter: function() {
return this.value.toString().substring(0, 6);
},
rotation: 0.1,
align: 'left',
step: 20,
enabled: true
},
style: {
fontSize: '8px'
}
},
yAxis: {
title: {
text: 'CO2'
},
labels: {
formatter: function() {
return this.value +'°'
}
}
},
legend: {
enabled: false
},
tooltip: {
// crosshairs: true,
shared: true,
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
series: [{
name: "CR3000Tower",
data: chartData,
marker: {
enabled: false
}
} ]
});
});
It is producing the following output:
I want to truncate the tooltipe value after 2 decimal point. So that the tooltip value will be 414.26 instead of the long value. Any help please. Thanks.

Set valueDecimals, see docs.

Highcharts: remove 1 label from windrose chart

I have created a wind rose type chart using highcharts, and something like a label
that needs to be removed
I tried using: { lables: { enabled: false } } and also tried using
showFirstLabel and showLastLabel
But it didn't work for me :(
Here is how i created the wind rose chart:
wind_rose_chart = Highcharts.data({
table: 'roulette_windrose',
startRow: 1,
endRow: 38,
endColumn: 37,
complete: function (options) {
// Create the chart
window.chart = new Highcharts.Chart(Highcharts.merge(options, {
chart: {
renderTo: 'windrose_container',
polar: true,
type: 'column',
animation: false,
backgroundColor: '#e4e6e1',
plotBackgroundImage: "/images/gallery/windrose_roulette.png",
height: 400,
width: 350,
},
colors: ['#008403',
'#E30000','#000000','#E30000',
'#000000','#E30000','#000000',
'#E30000','#000000','#E30000',
'#000000','#000000','#E30000',
'#000000','#E30000','#000000',
'#E30000','#000000','#E30000',
'#E30000','#000000','#E30000',
'#000000','#E30000','#000000',
'#E30000','#000000','#E30000',
'#000000','#000000','#E30000',
'#000000','#E30000','#000000',
'#E30000','#000000','#E30000'],
title: {
text: 'Spots'
},
pane: {
size: '70%'
},
legend: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
showFirstLabel: false,
showLastLabel: false,
tickmarkPlacement: 'on',
lineWidth:0,
gridLineWidth: 0
},
yAxis: {
min: 0,
gridLineWidth: 0,
endOnTick: false,
showLastLabel: false,
showFirstLabel: false,
labels: {
formatter: function () {
return this.value;
}
}
},
tooltip: {
formatter: function() {
return this.y;
}
},
plotOptions: {
series: {
stacking: 'normal',
shadow: false,
groupPadding: 0,
pointPlacement: 'on',
}
},
navigation: {
buttonOptions: {
enabled: true
}
},
exporting: {
enabled: true
},
credits: {
enabled: false
}
}));
}
});

following code is working:
yAxis: {
...
labels: {
enabled: false
}
}
DEMO

Resources