Is there a way to adjust the line-height of axis labels in Highcharts? Sometimes with line-broken labels, overlap/spacing issues can occur that would be mitigated if it were possible to decrease line-height.
As you can see in the longer red labels in the image below, it would be helpful to customize line-height. Is there a way to do this? Setting line-height in either the CSS or in xAxis.labels.style did not have any effect.
Example options:
xAxis: {
labels: {
style: {
textOverflow: 'none', // To disable automatic ellipsizing, per https://github.com/highcharts/highcharts/issues/3941
// lineHeight: '0.5' // Has no effect
}
},
categories: [
'Sweden',
'Federal Democratic Republic of Ethiopia',
'Finland',
'United Kingdom of Great Britain and Northern Ireland',
'Oceania'],
...
Codepen: http://codepen.io/ericpedia/pen/peNZML
You cannot do this via css because there is no line-height presentational attribute support in svg. See the answer svg-how-to-set-text-line-height. What Highcharts do - it mocks html-css line-height property on svg by setting dy property. In SVG dy is not a presentational attribute so it cannot be set in stylesheet.
To preserve the lineheight option, you can modify Highcharts internal method so its cssish style will be applied.
var H = Highcharts;
H.wrap(H.Tick.prototype, 'addLabel', function (p) {
p.call(this);
const label = this.label;
const labelOptions = this.axis.options.labels;
if (label) {
label.css({
lineHeight: labelOptions.style.lineHeight
})
}
})
Axis config:
labels: {
style: {
textOverflow: 'none',
lineHeight: 12
}
},
Live example and output:
https://jsfiddle.net/4dztcw5d/
As I mentioned in the comment, you can also set labels.useHTML to true, build a proper html and apply to it html-css styling, including line-height.
For some reason the highcharts library that you are using doesn't take into account some of the css.
I tried using this one http://code.highcharts.com/highcharts.js and seems to work i added in the x-axis label style
fontSize:'15px',
lineHeight: "12"
and had to set the colors with !important
text:nth-child(odd){ fill: blue!important; }
text:nth-child(even){ fill: red!important; }
and it seems to work, here is the codepen http://codepen.io/anon/pen/ryWoxo
Related
I am using amchart5 with React and based on this demo decided to create clustered vertical chart.
if I give "500px" as width it would be like
width:"500px"
if I give "400px" or less it would be like
width:"400px" or less
as you see place of labels like 2021 or 2021 changed ...
so how can I fix this? I want to give differents width and it will work without this problem
Default gradiant size of this chart demo is big that's why labels would be hidden.
Added minGridDistance to my xAxis like this:
const xAxis = chart.xAxes.push(
am5xy.CategoryAxis.new(root, {
categoryField: "x",
renderer: am5xy.AxisRendererX.new(root, {
cellStartLocation: 0.1,
cellEndLocation: 0.9,
minGridDistance: 20,
maxWidth: 150,
}),
tooltip: am5.Tooltip.new(root, {}),
})
);
and it solved!
I have this chart:
But it's a bit ambiguous as to which color belongs to which label. So I decided to add a little padding to the labels. In ChartJS documentations we have:
Name Type Default Description
padding number 10 Padding between rows of colored boxes.
So I double this number:
options: {
legend: {
position: "top",
labels: {
boxWidth: 5,
usePointStyle: true,
padding: 20
}
}
}
And I can see that it works:
But now it also adds padding to the top of the legend. To make the difference more noticeable, I'm going to exaggerate and set the padding to 50:
I'm trying add padding only between the labels of the legend, so that it's clear which box (colored circles) belong to which label. How can I do that?
For my graph, I have a single y-axis (y1), and I am trying to add a second axis (y2) which is a scaled version of y1.
Simply put, is it possible to do a graph like this. But I want a second axis, with the same scaling ratio, but in different units (i.e. that is multiplied by some k).
I have tried to just change the label on the yAxis:
` labels: {
format: '$ {value* price} ',
style: {
color: Highcharts.getOptions().colors[0]
}
},`
But this hacky way does not seem to work for me.
In my case, I have a graph of percent change on y1, is it possible to put the price on y2?
I do not want to add another set of lines since I am already using 10, which would mean I would need 20 lines in total
Any help would be greatly appreciated!
You need to link the second axis to the first by linkedTo property and use formatter function to display some custom scale:
yAxis: [{}, {
opposite: true,
labels: {
formatter: function() {
return this.value * 1000
}
},
linkedTo: 0
}]
Live demo: http://jsfiddle.net/BlackLabel/j83pghta/
API Reference:
https://api.highcharts.com/highcharts/yAxis.linkedTo
https://api.highcharts.com/highcharts/yAxis.labels.formatter
I've create a line chart with chart.js. I changed the legend symbol form from rects to circles by using:
legend: {
display: true,
labels: {
usePointStyle: true,
},
}
I want to change the size of the circles. But according to the documentation this is only possible if I also change the font size:
Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case).
- https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration
Does anyone know if there is another option to change the size? Or do I have to use generateLabels().
Here is a codePen to take a look on that.
You can use the boxWidth option to influence the size of the point in the legend:
options: {
legend: {
labels: {
usePointStyle: true,
boxWidth: 6
}
}
}
read the documentation of chartjs about legend
I'd like to fill the Highcharts to fill its width to 100% of its parent without any padding left/right.
I read HighCharts full width issue and tried set :margin minPadding and maxPadding to 0 but does not work.
Demo to demonstrate the problem
From the demo, the xAxis is to expand 100% of the container, and part of x categories value is not shown.
How can I setup the options to solve the problem?
You need to set min/max values as workaround.
xAxis:{
type:'categories',
min:0.49,
max: categories.length - 1.49,
categories: categories,
minPadding:0,
maxPadding:0,
gridLineWidth:0,
tickmarkPlacement: 'between',//仅适用于类别轴categories值时候，刻度线位于在类别名称的中心
labels: {
align:'center',
y:-3,//垂直偏移
style:{
color:'white'
}
}
},
http://codepen.io/anon/pen/PZWxwa