We Keep Coding

Highcharts: Implement a second y-axis related to the first y-axis

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

How to adjust line-height/ellipses in Highcharts axis labels

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

Highstock/chart - On resize, don't crop chart

How to keep the chart from cropping on resize, but instead just change its viewport?
I find it a a bit hard to explain, so please let me know if more explanation is needed.
The chart on the first screenshot look nice, they have a 'normal spacing between them and the bars are not cropped. This one has a 1000px width.
Chart box wide
On the second screenshot, the chart is only 300px wide, and the candlesticks become 'cropped'..
Chart box cropped
Instead I would like to only change the viewport, so that the bars are never cropped and are always te same size.. Only the date-range (Viewport) changes.. You see more bars on a wider chart, but it doesn't meen the bars itself should grow or shrink.
I tried it with simple algoritme, but its very prone to error.
let parentW = this._elementRef.nativeElement.parentNode.clientWidth,
data = this.chart.xAxis[0].series[0].data,
barW = 10,
barsToShow = Math.ceil(parentW / barW),
firstBar = (data[data.length - barsToShow] || data[0]),
lastBar = data[data.length - 1];
this.chart.xAxis[0].setExtremes(firstBar.x, lastBar.x, redraw);
I couldn't find any setting in the Highcharts doc and google didn't help much either. Many thanks

Desired behaviour can be achieved with the changing data grouping groupPixelWidth property.
When the chart has smaller width than, e.g. 300px, groupPixelWdith can be set to a higher value.
responsive: {
rules: [{
chartOptions: {
plotOptions: {
series: {
dataGrouping: {
groupPixelWidth: 30
}
}
}
},
condition: {
maxWidth: 300
}
}]
}
example: http://jsfiddle.net/b894z8ug/1/

Highcharts Y-axis title text length is more than chart's height

I am working on highcharts. In my code, sometimes Y-axis title text is more than chart's height.
Ex. I am create one chart. In this chart, height is 400px but my Y-axis title text is long so some part of the text is not display. so what can i do?
see in jsfiddle

You can set width on title and adapt margin.
yAxis: {
title: {
enabled: true,
text: 'Custom with <b>simple</b> <i>markup</i>Custom with <b>simple</b> <i>markup</i>Custom with <b>simple</b> <i>markup</i>Custom with <b>simple</b> <i>markup</i>',
margin: 40,
style: {
width: 200,
fontWeight: 'normal'
}
}
},
Example: http://jsfiddle.net/EUSVQ/12/

How can I move columns to the right in a Highcharts chart?

I have a column chart with Highcharts library, something like this:
If you see the red lines maybe you notice what I want achieve. I need to reduce the space between columns and move them to the right, so the chart will have more space between the y-labels and the first column.
Notice that I need a fixed width of 48px for every column. I tried with with groupPadding : 0 and pointPadding : 0 with no luck.
plotOptions : {
series : {
colorByPoint : true,
pointWidth : 48,
borderWidth : 0,
}
},
All the sample code is on jsFiddle.
How can I move all the columns to the right and reduce the space between columns?
UPDATE: As an answer says, a solution is to change the container width to a smaller one. But I need that the grid lines (the grey ones) fill all the page (actually, fill the parent div that would have more width than the chart container). Is it possible to draw the grey lines (the grid lines) outside the chart?

Finally I've done what #HristoIvanov told me in a comment. They suggest that I should put NULL columns at the begining.
Setting the first categorie as NULL and not showing it, is what I need because highcharts left the space for the first column.
That's the code that I needed:
xAxis : {
showFirstLabel: false,
categories : [ null, 'A', 'B', 'C', 'D', 'E', 'F', 'G' ],
[ ... ]
And don't forget the data:
series : [
{ data : [null, 11, 22, 53, 74, 65, 46, 37] }
You can view the result in jsFiddle.

Your code was with a ","
Try this:
plotOptions : {
series : {
colorByPoint : true,
pointPadding : 0,
groupPadding : 0
}
},
Here is your demo: http://jsfiddle.net/zgypy32h/5/
http://jsfiddle.net/zgypy32h/4/

This looks more like what you were going for: JSFiddle
There were a couple things that were giving you trouble. The chart by default wants to fill out the div it's in as much as possible because of Highcharts default settings (check out the reflow option). So to keep the columns close together you have set a max-width or width on the container that you feel satisfies the spacing between columns.
<div id="container" style="max-width: 650px; height: 520px; margin: 0 auto"></div>
And give yourself a little more margin on the left of the chart to compensate.
chart : {
renderTo : 'container',
type : 'column',
showAxes : true,
marginRight : 0,
marginLeft : 50,
spacingLeft : 20,
spacingRight : 0
},
The second is the offset of the y-axis labels to give some spacing between them and the first column. Highcharts doesn't seem to have an initial offset for the first x point, but offset should suffice.
yAxis: {
offset: 60
}