We Keep Coding

How to make Column type series Secondary yAxis values dynamic and not always start with 0?

Refer this jsfiddle link first:
https://jsfiddle.net/sq7n69dh/17/
Here, In this above example the spline type series (Series 2) primary yAxis (left side) doesn't start with 0% it takes the dynamic value based on the series data range.
The same thing I want in the column type series (Series 2) Secondary yAxis (right side) i.e. instead of staring with $0, it should start with some dynamic value based on the series data range.
** The main reason is to make the minute change in the values for Series 2 to be differentiated properly in the chart view. I mean for minute changes in value of Series 2, the column height looks kind of equal on chart view.
When I change the type for Series 2 from column to spline, it works.
So does it means we can't have yAxis dynamic plotting for column series and it
will always start with 0 value ??
HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>
JS:
Highcharts.chart('container', {
chart: {
height: 298,
marginTop: 33
},
xAxis: {
categories: [
"Current",
"30 Days",
"60 Days",
"90 Days"
],
},
yAxis: [{
labels: {
format: '{value:,.1f}%'
}
}, { // Secondary yAxis
labels: {
format: '$' + '{value:,.0f}'
},
opposite: true
}],
series: [{"name":"Series 1",
"data":[95.19,95.93,95.93,95.93],
"type":"spline",
"color":"#88CB11",
"yAxis":0},
{"name":"Series 2",
"data":[601.02,603.81,600.31,599.9],
"type":"column",
"color":"#4472C4",
"yAxis":1}]
});
HighChart Screenshot

According to the comments (thanks for the clarification) - I think that the best solution for this case will be finding the smallest value in the series and set it as a yAxis.min in the load callback.
Demo: https://jsfiddle.net/BlackLabel/w2yq4bcn/
events: {
load() {
let chart = this,
lowestValue;
lowestValue = chart.series[1].points.sort((a, b) => a.y - b.y)
chart.yAxis[1].update({
min: lowestValue[0].y
})
}
}
API: https://api.highcharts.com/highcharts/chart.events.load
API: https://api.highcharts.com/class-reference/Highcharts.Axis#update

Highcharts AreaRange Chart issues with xAxis and last data point label

I used area range Highcharts but facing certain issues as:
For X-axis, the chart doesn't start with an initial point rather shows incorrect start tick value(i.e. 2020) instead of 2019.
Need to show label values for last data point only for each series, attached image below for reference
Could someone please help me with what do I do to resolve my issues.
Thanks in advance!
For the 1st issue, I tried changing the 'pointStart' attribute value for plotOptions->series but didn't work.
"plotOptions": {
"series": {
"pointStart": 1546300800000
}
}
Here is JSFiddle link of the chart containing code:

The first issue can be resolved by setting xAxsi.tickInterval = plotOptions.series.pointInterval:
xAxis: {
type: "datetime",
tickInterval: 31536000000
...
}
The second issue can be resolved by providing labels formatter callback function that will return only the last series point value. Also, other dataLabels properties have to be set properly (like align, overflow, etc). Check demo and code posted below.
Code:
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'middle',
padding: 8,
allowOverlap: true,
overflow: 'allow',
crop: false,
formatter: function() {
var point = this.point,
series = this.series;
if (series.data.length === point.index + 1) {
return '$' + this.y.toFixed(1);
} else {
return '';
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/2xLevj6y/
API reference:
https://api.highcharts.com/highcharts/xAxis.tickInterval
https://api.highcharts.com/class-reference/Highcharts.DataLabelsOptionsObject#formatter
https://api.highcharts.com/class-reference/Highcharts.DataLabelsOptionsObject#align
https://api.highcharts.com/class-reference/Highcharts.DataLabelsOptionsObject#overflow

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

jQPlot Horizontal Bar Graph - assign names to Y Axis

I figured it out:
I was not including the jqplot.CategoryAxisRenderer. Once I included that, I was able to get it working.
Thanks, everyone!
UPDATE:
My code works in JSFiddle, so it's a CSS problem I'm having. Please disregard.
I'm trying to create a fairly simple bar chart in jQPlot. I'm expecting two horizontal bars, one on top of the other. Both are equal to 1 on the X axis. I want the Y axis to have the labels 'In Progress' for the top bar, and 'Apr 2014' for the bottom bar. I have tried numerous combinations. If I do not specify Ticks, then I see the two bars. Specifying Ticks, or using the desired labels as the Y axis data point just shows both labels overlapping with no bars. (ignore the setTimeout) Thanks in advance.
Here's the code:
var data = [[1,1],[1,2]];
var ticks = ['In Progress','Mar 2014'];
$(function () {
setTimeout(function(){
var plot1 = jQuery.jqplot ('chartdiv', [data],
{
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal'
},
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
}
});
},
100);
});

I have modified the JsFiddle given by Batu Zet previously adding following lines in order to label your bar chart here :
series: [
{
pointLabels:{
show:true,
labels:['Apr 2014', 'Apr 2014']
}
},
{
pointLabels:{
show:true,
labels:['In Progress', 'In Progress']
}
}
]
P.S : The labels are duplicated for each serie in order to display the same label for two points in a serie.

Highcharts y axis thousands separator

How to add a thousands separator to the Y Axis of Highcharts?
This is what I have:
yAxis: [{ // Primary yAxis
labels: {

In addition to what #jfrej suggested:
If you're directly formatting an axis, use {value} for both yAxis and xAxis:
Fiddle for yAxis format
Fiddle for xAxis format
If you're formatting a point in a tooltip, you may want to use {point.y} and/or {point.x}:
Fiddle for tooltip.pointFormat
Fiddle for tooltip.pointFormat with valueSuffix extension
If you're directly formatting the point label, you may want to use {x} and/or {y}:
Fiddle for plotOptions.series.dataLabels, formatting all points
Fiddle for series.data.dataLabels, formatting specific point
So, since you're formatting yAxis, {value} should work as expected:
yAxis: {
labels: {
format: '{value:,.0f} €'
}
}

If you find the above solution not working, try to add this:
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});

Code to format with comma
var UNDEFINED;
Highcharts.chart(...
...
yAxis: {
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value, -1, UNDEFINED, ',');
}
}
}