Highcharts - Linear series zoom on logarithmic axis - javascript

I'm having trouble when zooming in on a linear series that is on a logarithmic yAxis. What would be an easy solution?
Zoom out:
Zoom in:
Linear series is not rescaling correcly, those series should remain on same position relative to main series, is there any missing configs to those series that would adjust them to logarithmic axis?
Demo: https://jsfiddle.net/bernardo0marques/dfqouLm5/30/
Code snippet:
Highcharts.stockChart("container", {
chart: {
type: "line",
zoomType: "xy",
},
series: [
{
data: [
{
x: -220924800000,
high: 63,
low: 56,
close: 62,
open: 56,
name: "01/01/1963",
color: "#F57350",
},
{
x: 1657670400000,
high: 18893.92,
low: 18159.03,
close: 18159.03,
open: 18593.15,
name: "13/07/2022",
color: "#297F0D",
},
],
dataGrouping: {
forced: true,
groupPixelWidth: 0,
units: [["day", 1]],
},
id: "main-series",
name: "Demo series",
type: "candlestick",
yAxis: "default",
},
{
color: "#C0C0C0",
data: [
[-220914000000, 369],
[1659236400000, 198817.91340815497],
],
dashStyle: "LongDash",
id: "upper-tendency",
tooltip: {
valueDecimals: 0,
xDateFormat: "%B %Y",
},
showInLegend: false,
yAxis: "default",
},
{
color: "#C0C0C0",
data: [
[-220914000000, 34],
[1659236400000, 16672.03531810569],
],
dashStyle: "Solid",
id: "lower-tendency",
tooltip: {
valueDecimals: 0,
xDateFormat: "%B %Y",
},
showInLegend: false,
yAxis: "default",
},
],
title: { text: "Logarithmic Zoom: Linear series" },
tooltip: { shared: true, split: false },
xAxis: {
dateTimeLabelFormats: {
second: "%d/%m/%y<br/>%H:%M:%S",
minute: "%d/%m/%y<br/>%H:%M",
hour: "%d/%m/%y<br/>%H:%M",
day: "%d/%m/%y",
month: "%m/%y",
year: "%Y",
},
type: "datetime",
},
yAxis: [
{
id: "default",
opposite: true,
type: "logarithmic",
title: { text: "" },
reversed: false,
offset: 50,
tickInterval: 0.4,
},
],
});

It is a bug which you can track in the following ticket:
https://github.com/highcharts/highcharts/issues/16784
As a temporary workaround, you can set xAxis.ordinal to false in your config.
Demo:
https://jsfiddle.net/BlackLabel/rfxygz5m/

Related

spline chart highchart to fill the color in series

I have created one highchart in jsfiddle
Highcharts.chart('container', {
chart: {
type: 'areaspline',
},
title: {
text: 'Soverign Capped 1 year PD',
align: 'left',
backgroundColor: 'gray',
style: {
fontSize: "12px",
}
},
subtitle: {
text: '30 days moving average',
align: 'left',
style: {
color: 'gray',
fontSize: "8px",
}
},
xAxis: {
categories: [
'10/11/2019',
'11/11/2019',
'12/11/2019',
'1/11/2020',
'2/11/2020',
'3/11/2020',
'4/11/2020'
],
min: 0.5,
max: 5.5,
startOnTick: false,
endOnTick: false
},
yAxis: {
title: {
text: 'PD%',
align: 'high',
fontWeight: 'bold'
},
max: 25,
startOnTick: false,
endOnTick: false
},
tooltip: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
marker: {
enabled: false
},
states: {
inactive: {
opacity: 1
}
},
dataLabels: {
enabled: true,
inside: true,
style: {
fontWeight: "bold",
},
formatter: function() {
if (this.x == "4/11/2020") {
return this.series.name;
}
}
}
},
enableMouseTracking: false,
tooltip: {
enabled: false
},
areaspline: {
fillOpacity: 1,
},
},
series: [{
color: '#fbb189',
name: 'Deitrioting',
showInLegend: false,
data: [25, 25, 25, 25, 25, 25, 25]
},
{
color: '#fff2d0',
name: 'Stable',
showInLegend: false,
data: [3, 4, 5, 5, 4, 10, 10]
}, {
color: '#c2e0b7',
name: 'Improving',
showInLegend: false,
data: [1, 3, 4, 3, 3, 5, 7]
},
{
name: '',
showInLegend: false,
type: 'spline',
data: [7.0, 6.9, 9.5, 12, 23, 4, 3]
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Currently, I have defined different colour for the different series. But for the last date, I want to set the red colour for all the series.
Can you help me with this?
Sample image attached below.
You can use zones:
plotOptions: {
...,
areaspline: {
...,
zones: [{
value: 5.5
}, {
color: 'red',
value: 6.5
}],
},
}
Live demo: https://jsfiddle.net/BlackLabel/m4u5zt8g/
API Reference: https://api.highcharts.com/highcharts/series.area.zones

How to slide in highcharts

I want to slide in Highcharts view , Now i just slide from 'rangeSelector'.This are my code , please help me . I don't know how to set configurations ----------------- The data are too many , but i think the data is no problem , I think the problem is my configuration ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
this.Highcharts = Highcharts.stockChart(`${this.wrapId}`,
{
chart: {
// zoomType: "x"
plotBackgroundColor: "rgb(255, 255, 255)",
backgroundColor: "rgb(255, 255, 255)",
events: {
redraw: function() {
let series = this.series[0];
},
render: function() {}
}
},
title: {
text: ""
},
subtitle: {},
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
second: '%m/%d %H:%M',
minute: '%m/%d %H:%M',
hour: '%m/%d %H:%M',
day: '%m-%d',
week: '%m-%d',
month: '%Y-%m',
year: '%Y'
},
// tickInterval: 60 * 1000, // 刻度线 1分种
lineColor: "rgb(230, 230, 230)",
lineWidth: 2,
gridLineWidth: 1,
gridZIndex: 1,
tickPosition: "outside", // 刻度
tickColor: "transparent", // 刻度颜色
gridLineColor: "transparent",
range:3600000,
},
credits: {
enabled: false
},
rangeSelector: {
enabled: false
},
navigator: {
// 下导航
enabled: true
},
scrollbar: {
enabled: true
},
// 数据提示框
tooltip: {
enabled: true,
backgroundColor: "white",
borderColor: "white",
style: {
color: "black",
zIndex:5,
}
},
yAxis: [
{
top: "0%",
height: "50%",
title: {
text: ""
},
endOnTick: true, // 强制结束于Y轴
// markers:false,
crosshair: true, // 横轴
dashStyle: "shortdot",
crosshair: {
width: 1.5,
color: "white",
dashStyle: "dash"
},
plotLines: [
{
width: 2,
color: "rgb(239, 197, 114)",
value: this.startValue,
dashStyle: "Dash",
label: {
text: `<span style="color:white;background:rgb(239, 197, 114);border-radius:3px;padding:2px 2px 0 2px;">${
this.startValue
}</span>`,
align: "right",
useHTML: true,
y: -5,
x: 0
},
zIndex: 3
}
],
gridLineWidth: 1,
gridZIndex: 1,
gridLineColor: "rgb(230, 230, 230)",
opposite: true
},
{
top: "56%",
height: "42%",
tickAmount:4,
}
],
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[
1,
Highcharts.Color(Highcharts.getOptions().colors[0])
.setOpacity(0)
.get("rgba")
]
]
},
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
},
candlestick: {
upLineColor: "transparent", // docs
upColor: "rgb(235, 106, 101)",
color: "rgb(121, 170, 111)"
},
macd: {
color: "rgb(199, 103, 103)",
marker: {
enabled: false,
lineColor: "rgb(39, 40, 61)",
states: {
hover: {
enabled: false
}
}
}
}
},
series: [
{
name:"MA",
type: "candlestick",
id: "candlestick",
data: this.data,
fillColor: "",
lineColor: "",
allowPointSelect: false,
index: 4,
colors: ["rgb(235, 106, 101)", "rgb(121, 170, 111)"],
events:{
drag(a){
}
}
},
{
name:"MA1",
type: "line",
yAxis: 0,
allowPointSelect: false,
index: 5,
data: this.data_.MA1,
},
{
name:"MA2",
type: "line",
yAxis: 0,
allowPointSelect: false,
index: 5,
data: this.data_.MA2,
},
{
name:"MA3",
type: "line",
yAxis: 0,
allowPointSelect: false,
index: 5,
data: this.data_.MA3,
},
{
name:"MA4",
type: "line",
yAxis: 0,
allowPointSelect: false,
index: 5,
data: this.data_.MA4,
},
{
// Two different zones:
type: 'macd',
yAxis: 1,
linkedTo: 'candlestick',
},
// {
// type: "macd",
// yAxis: 1,
// data:this.data,
// linkedTo: 'candlestick',
// // allowPointSelect: false,
// index: 4
// },
{
name:"DEA",
type: "line",
yAxis: 1,
allowPointSelect: false,
index: 5,
data: this.data_.DEA,
},
{
name:"DIF",
type: "line",
yAxis: 1,
allowPointSelect: false,
index: 5,
data: this.data_.DIF,
},
]
})

HighCharts Y Axis scales aren't correct

I cant seem to fix the Y axis scales on my chart. My JSFiddle code is here.
As you hover over the lines, the value that pops up does not match the scales on the Y Axes (Example, when you put your cursor towards the center of the graph, the Black Line has the value of 60% but when you look at the Y axis scale, it says 200%).
How would I go about fixing the Y axes so they show the appropriate values? I'm trying to make it so Signal Strength shows 0%-100%, Main Power 0-24V and Temperature showing 30F-120F.
Code:
function createChart() {
Highcharts.stockChart('container', {
alignTicks: false,
rangeSelector: {
selected: 4
},
chart: {
renderTo: 'container',
height: 500,
alignTicks: false
},
yAxis: [{ // Primary yAxis
tickAmount: 8,
tickInterval: 1,
labels: {
format: '{value}°F',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: false
}, { // Secondary yAxis
tickAmount: 8,
tickInterval: 10,
title: {
text: 'Main Power',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} volts',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
tickAmount: 8,
gridLineWidth: 0,
title: {
text: 'Signal Strength',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
plotOptions: {
series: {
compare: 'percent',
showInNavigator: true
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2,
split: true
},
series: [{
name: 'Main Power',
type: 'spline',
yAxis: 1,
data: [24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24],
tooltip: {
valueSuffix: ' V'
}
}, {
name: 'Signal Strength',
type: 'spline',
yAxis: 2,
data: [20, 30, 40, 50, 60, 60, 60, 60, 70, 76, 78, 80],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' %'
}
}, {
name: 'Temperature',
type: 'spline',
yAxis: 0,
data: [70, 70, 76, 75, 78, 72, 80, 73, 75, 78, 72, 73],
tooltip: {
valueSuffix: ' °F'
}
}]
});
Removed the "percent" in:
plotOptions: {
series: {
compare: 'percent',
showInNavigator: true
}
},

HighCharts Bubble graph JSON as data source

I am stuck in a problem where bubble chart series is not plotting - inspite of doing it according to HighCharts example tutorial.
There is no error on browser console as well making it really difficult for me to figure out.
Following is the data received from AJAX onSuccess response:
d:"[{"id":"3","name":"Australia","x":"24.1","y":"19.9","z":"3.5"},{"id":"1","name":"England (STA)","x":"23.8","y":"20.5","z":"2.6"},{"id":"5","name":"Germany","x":"22.8","y":"20.9","z":"2.3"},{"id":"2","name":"Spain","x":"17.8","y":"22.2","z":"1.4"}]"
Below is full code where I binded it to HighCharts:
function ShowMaturityGraph() {
var params = {};
params.countryIDList = "1,2,3,5";
params.xAxis = "1";
params.yAxis = "2";
params.bubbleSize = "6";
$.ajax({
type: "POST",
url: "default.aspx/GetMaturityValues",
data: JSON.stringify(params),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
visitorData(response.d);
},
failure: function (response) {
alert(response.d);
}
});
}
function visitorData(data) {
alert(data);
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Maturity Values'
},
subtitle: {
text: ''
},
xAxis: {
gridLineWidth: 1,
title: {
text: ''
},
labels: {
format: ''
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 65,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: ''
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: ''
},
labels: {
format: ''
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: '',
x: -10
},
zIndex: 3
}]
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
//format: '{point.name}'
}
}
},
series: $.parseJSON(data),
});
}
How about something like that i am using your data. You change it as you pleased. its high chart example with data provided above in the question.
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Sugar and fat intake per country'
},
subtitle: {
text: 'Source: Euromonitor and OECD'
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Daily fat intake'
},
labels: {
format: '{value} gr'
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 65,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: 'Safe fat intake 65g/day'
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Daily sugar intake'
},
labels: {
format: '{value} gr'
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: 'Safe sugar intake 50g/day',
x: -10
},
zIndex: 3
}]
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
'<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
'<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
'<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [{
"id": "3",
"name": "Australia",
"x": 24.1,
"y": 19.9,
"z": 3.5
}, {
"id": "1",
"name": "England (STA)",
"x": 23.8,
"y": 20.5,
"z": 2.6
}, {
"id": "5",
"name": "Germany",
"x": 22.8,
"y": 20.9,
"z": 2.3
}, {
"id": "2",
"name": "Spain",
"x": 17.8,
"y": 22.2,
"z": 1.4
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
hope that helps.

Highcharts small size div not showing minorTickInterval

I'm trying to add Highcharts to my page, but the problem is my DIV tag size is quite small (233px,98px) and I want to show minorTickInterval in it, but highcharts truncate them because of small DIV size.
http://jsfiddle.net/a62nhs7f/
Is there anyway to show the inner lines of the interval in the small size?
var options = {
title: {
text: ''
},
labels: {
enabled: false
},
title: {
text: '',
align: 'high',
enabled: false
},
subtitle: {
text: '',
align: 'high',
enabled: false
},
/*
xAxis: {
tickInterval: 1,
breaks: [{
from: 5,
to: 10,
breakSize: 1
}]
},
*/
legend: {
enabled: false
},
yAxis: {
gridLineWidth:1,
lineWidth: 1,
min: 0,
//tickWidth: 1,
minTickInterval:5,
minorGridLineWidth:1,
minorTickInterval: 0.1,
minorTickLength: 2,
//type: 'logarithmic',
minorTickInterval: 5,
//minorTickInterval: 'auto',
//minorTickLength: 0,
title: {
text: '',
//align: 'high',
enabled: false
},
labels: {
//enabled: false,
style: {"font-size":'8px'},
formatter: function() {
return this.value;
}
}
},
xAxis: {
min: 0,
tickmarkPlacement: 'on',
title: {
enabled: false
},
labels: {
enabled: false
},
/*gridLineColor: '#c9d5ba',
gridLineWidth: '1',
lineColor: '#222222',
lineWidth: 0,*/
categories: [1.2, 2, 3.1, 4.3, 5.1, 5.9, 6.7, 7.5, 8.3, 9.1, 9.8, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
labels: {
formatter: function () {
return '<a style="color:green" data-value="' +[this.value] + '">' +
this.value + '</a>';
},
style: {"font-size":'8px'}
}
},
series: [{
data: [5.7, 11.1, 22.2, 38.1, 51, 66.6, 83.3, 101.1, 118.6, 135.7, 150.9, 161.4, 169.2, 172.8, 176.8, 178.5, 179.7, 179.9, 180, 179.9, 179.1]//,
//pointInterval: 500
}]
};
Thanks
You can disable the line markers. I think It is better solution for you.
plotOptions: {
line: {
marker: {
enabled: false
}
}
},
Chek my demo.

Categories