How do I prevent labels from wrapping in Highcharts styled mode? A partial solution that I found is to use the useHTML flag and set white-space: nowrap; with css, but then the labels are rendered on top of the tooltip. If I set useHTML to false, then highcharts automatically adds line breaks. I've included a code snippet to illustrate the problem. Just run the snippet and hover your mouse over the bottom bar.
Highcharts.chart('container', {
chart: {
type: 'bar',
borderWidth: 1
},
title: {
text: 'No space reserved for X axis labels'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
categories: ['Product 1', 'Product 2', 'Yet another product with a long label'],
labels: {
rotation: 0,
align: 'left',
reserveSpace: false,
x: 2,
y: -5,
useHTML: true
},
tickWidth: 0
},
series: [{
data: [39.9, 71.5, 50.4],
dataLabels: {
enabled: true
}
}]
});
#import 'https://code.highcharts.com/css/highcharts.css';
.highcharts-axis-labels span {
white-space: nowrap!important;
}
<script src="https://code.highcharts.com/js/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
To make it work with styled version of Highcharts, you can wrap addLabel function of Tick prototype. Take a look at the example below.
Example:
http://jsfiddle.net/vsy8abLb/
Related
I have a highcharts-angular organizational chart where when there are a lot of nodes in the chart, the boxes get smaller and their text is hidden. How can I make the chart expand (and a horizontal scrollbar to show) as much as needed so everything will be fully visible?
you can see an example here.
my chart options are these
chartOptions: Highcharts.Options = {
chart: { inverted: true },
title: { text: null },
tooltip: {
useHTML: true,
padding: 10,
style: { fontStyle: 'normal' },
outside: true,
distance: 30
},
series: [
{
type: 'organization',
name: null,
keys: ['from', 'to'],
data: [],
nodes: [],
colorByPoint: false,
color: 'white',
borderColor: '#c1c1c1',
}
]
};
and the html
<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions"
style="width: 100%; height: 100%; display: block;"
></highcharts-chart>
Set chart.width property to the appropriate value for you and change the default overflow style for the chart container.
JS:
chart: {
width: 2000,
...
},
CSS:
#container {
overflow: scroll !important;
}
Live example: https://jsfiddle.net/BlackLabel/t3b9fren/
API Reference: https://api.highcharts.com/highcharts/chart.width
I am trying to position a semi circle donut chart inside tooltip of a time series area chart as in the below JSFiddle:
https://jsfiddle.net/bru187cj/74/
tooltip: {
shape:'circle',
useHTML: true,
formatter: function() {
setTimeout( function() {
$("#tca").highcharts({
chart: {
height:200,
backgroundColor:null,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title:{
text:''
},
credits:{
enabled:false
},
exporting: {
enabled: false
},
plotOptions: {
pie: {
dataLabels: {
distance: 5
}
}
},
series: [{
type:'pie',
startAngle: -90,
endAngle: 90,
center: ['50%', '75%'],
innerSize:'60%',
data: [["A",15],["B",20],["C",3],["D",2]]
}]
});
}, 10)
return "<div id='hc-tooltip'><div id='tca'></div></div>";
}
}
However as you an see from the result, the donut chart is showing up outside the tooltip area. Note that this behaviour seems specific to StockChart.
Hope someone can help here.
You can set height style for the chart container in tooltip, but it can not be higher than the main chart plot area height.
#hc-tooltip {
display: inline-block;
width: 200px;
height: 200px;
padding: 0px;
}
Eventaully, you can customize 'renderSplit' method in Tooltip prototype.
Live demo: https://jsfiddle.net/BlackLabel/q7vm0w1z/
When I use the highchart labels are not coming with the ellipsis style.
For that, I need to enter more texts to achieve that by default.
For example,
for the label text "Africa hi hello how are you. I am fine. thank you. what about you? how is going? Nothing special", it shows the ellipsis as "Africa hi hello how are yo.."
But if I remove "Nothing special" and having only the following sentence, "Africa hi hello how are you. I am fine. thank you. what about you? how is going?", then labels are wrapped instead of applying ellipsis.
I have tried the formatter, but the tooltip is not coming by default.
If I use, usehtml property the design gets collapsed.
Please see the following code.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa hi hello how are you. I am fine. thank you. what about you? ho?', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
},
labels:{
formatter: function () {
return this.value;
}, style: {
color: 'black',
overflow:'none'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
},
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
stacking:'normal',
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2000',
data: [814, 841, 3714, 727, 31]
}, {
name: 'Year 2016',
data: [1216, 1001, 4436, 738, 40]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
Notice that in the demo that you provided the look of the label depends on the size of the chart. Ellipsis is applied when the width is very small. Otherwise words of the label are wrapped.
Your example as live demo: http://jsfiddle.net/BlackLabel/c7f2oadg/
Use configuration similar to the below one if you want to be sure that ellipsis will always be applied to long labels:
style: {
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
width: 100,
}
width causes here that ellipsis will be used in all labels wider than 100 px.
Live demo: http://jsfiddle.net/BlackLabel/v213vwts/
API reference: https://api.highcharts.com/highcharts/xAxis.labels.style
I was trying to implement progress-bar/status-bar in highchart, need to show 2 colors for the progress bar/status bar one background color and another color for status/progress, achieved using stacking bar in highchart but first rectangle in that
have white stroke color so it differentiating 2 rectangles but i need to show it as single rectangle instead of 2,Is there anyway to remove that white stroke color to show as single one.
<html>
<head>
<script src="highchart.js"></script>
</head>
<body>
<div id="container" style="min-width: 100px; max-width: 200px; height: 50px; margin: 0 auto"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'bar'
},
xAxis: {
tickColor: '#FFFFFF',
tickWidth: 1,
categories: [''],
labels:{
enabled: false
},
visible:false
},
title:{
text:''
},
yAxis: {
gridLineColor: '#FFFFFF',
minorGridLineWidth: 0,
lineColor: '#FFFFFF',
gridLineWidth: 0,
title: {
text: ''
},
labels:{
enabled: false
},
visible:false
},
exporting: { enabled: false },
legend:{
enabled: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
enabled: false
},
colors:['#999999', '#8BF30D', '#FFFFFF'],
series: [
{
name: '',
data: [1]
}, {
name: '',
data: [5]
},{
name: '',
data: [0]
}]
});
</script>
</body>
</html>
I think that you should be able to use borderWidth parameter that is described in Highcharts API:
http://api.highcharts.com/highcharts/plotOptions.column.borderWidth
plotOptions: {
series: {
stacking: 'normal',
borderWidth: 0
}
},
When you will use this parameter you will be able to eliminate white border from your columns. I have made an example how your chart will work using this option:
http://jsfiddle.net/rvj65mor/1/
I am generating my x-axis and y-axis data dynamically and displaying highcharts, but the chart becomes messy when the x-axis range is high with small intervals.
How do I make highcharts to make normal horizontally scrollable graph?
Here is what I am using right now:
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
//CODE FOR HIGHCHARTS JS
function makeChart() {
$('#container').highcharts({
chart: {
type: 'line',
marginRight: 130,
marginBottom: 100
},
title: {
text: 'Banana',
x: -20 //center
},
subtitle: {
text: 'Source: banana.com',
x: -20
},
xAxis: {
categories: xlist
},
yAxis: {
title: {
text: 'No. of C'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: 'C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: $("#repoSelector option:selected").text(),
data: ylist
}]
});
}
Two ways to achieve a scroll bar.
Option 1
You will need to use highstock.js and instead of rendering a stock chart, you have to render a highchart.
Then enable the scroll bar
scrollbar: {
enabled: true
}
Check the API for scroll bar and related operations here.
Here I have fiddled an example.
Option 2
Try setting min & max attributes to the x-axis.
xAxis: {
categories: [...],
min: 0,
max:9
}
Displays 10 categories in x-axis at a stretch, adding a scroll for the rest of the categories.
find the fiddled example here.
To enable scrollbar in x-axis, try this
xAxis: {
categories: xlist,
min: 0,
max: 4,
scrollbar: {
enabled: true
},
},
Check the jfiddle here: https://jsfiddle.net/BhavyaAprajita/zja90wf2/1/
Also, make sure that you import the highstock library
src="https://code.highcharts.com/stock/highstock.js"
add this
const Highcharts = require('highcharts/highstock');
comment this if you have
// import Highcharts from 'highcharts';
change xAxis to like this
xAxis : {
categories: [],
min:0,
max:9,
scrollbar: {
enabled: true
}
}
Use
require('highcharts/highmaps') instead of require('highcharts') in imports<br>
#NgModule({<br>
...<br>
imports: [<br>
BrowserModule, <br>
ChartModule.forRoot( <br>
require('highcharts/highmaps')<br>
],<br>
})