How to slide in highcharts - javascript

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,
},
]
})

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 get spacing between border and inner background color of a pie chart using highcharts?

By using the below code i got Pie chart as shown in this link: https://i.stack.imgur.com/WdyYA.png
But i need to get Pie Chart as shown in this link: https://i.stack.imgur.com/EscA8.png
Here is my code:
var highchartGraph = {
bindpieChart : function(percentage_c)
{
$('.piechart').highcharts({
chart: {
spacingBottom: -8,
spacingTop: -8,
spacingLeft: -8,
spacingRight: -8,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true,
type: 'pie',
width: null,
height: null,
backgroundColor: 'rgba(255, 255, 255, 0)',
},
title: {
text: percentage_c+'%',
align: 'center',
verticalAlign: 'middle',
style: {
color: '#FFF',
fontSize: '18px',
fontFamily: 'arial'
},
y: 3,
x: 20
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {
},
},
states: {
hover: {
enabled: false,
brightness: 0
}
}
},
pie: {
borderWidth: 2,
borderColor: "#6821A5"
}
},
series: [{
name: " ",
colorByPoint: true,
data: [{
name: "Unrestricted",
y: percentage_c,
color: '#6821A5',
tooltip: false
}, {
name: "Restricted",
y: 100 - percentage_c,
color: '#FFF',
dataLabels: {
enabled: false
}
}]
}]
});
}
}
You could add another series that will create the border.
Demo: http://jsfiddle.net/rxp0noj5/
var percentage_c = 75;
$('#container').highcharts({
chart: {
spacingBottom: -8,
spacingTop: -8,
spacingLeft: -8,
spacingRight: -8,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true,
type: 'pie',
width: null,
height: null,
backgroundColor: 'rgba(255, 255, 255, 0)',
},
title: {
text: percentage_c + '%',
align: 'center',
verticalAlign: 'middle',
style: {
color: '#FFF',
fontSize: '18px',
fontFamily: 'arial'
},
y: 3,
x: 20
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {},
},
states: {
hover: {
enabled: false,
brightness: 0
}
}
},
pie: {
borderWidth: 2,
borderColor: "none"
}
},
series: [{ // series for border
innerSize: '100%',
data: [1],
borderColor: 'red'
},{
size: '95%', // decresed size for padding between pie and border
name: " ",
colorByPoint: true,
data: [{
name: "Unrestricted",
y: percentage_c,
color: '#6821A5',
tooltip: false
}, {
name: "Restricted",
y: 100 - percentage_c,
color: 'none',
dataLabels: {
enabled: false
}
}]
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

trying to draw dotted lines over the chart

Hey Guys I'm trying to draw dotted lines over my highcharts chart but when I try this the lines either push the chart out of position or skip over the chart and continue past it.I'm also trying to put labels on the top of each barchart too
here's my code
$(function () {
$('#container5').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
tooltip: { enabled: false },
exporting: {
enabled:false
},
credits: {
enabled: false
},
legend: {
enabled:false
},
xAxis: {
labels:
{
enabled: false
},
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
min: 0,
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
title: {
text: ''
},
categories: ['']
},
yAxis: {
labels:
{
enabled: false
},
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
min: 0,
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
title: {
text: ''
},
min: 0,
title: {
text: ' '
},
},
plotOptions: {
column: {
stacking: 'normal',
animation: false
},
series: {
states: {
hover: {
enabled: false
}
}
}
},
series: [{
name: '10',
data: [10],
pointWidth: 50,
groupPadding: 0,
color: '#f7a35c'
}, {
name: '12',
data: [12],
pointWidth: 50,
groupPadding: 0,
color: '#004A98'
}, {
name: '12',
data: [12],
pointWidth: 50,
groupPadding: 0,
color: '#509ADC'
}]
});
});
and
<div class="col-md-2" id="container5" style="width: 200px; height: 700px; margin:auto"></div>
It looks like
Picture one
but I want it to look like this
Picture two
You can use Renderer.path to add custom line in the chart.
chart.renderer.path(['M', 0, 0, 'L', 100, 100])
.attr({
'stroke-width': 2,
stroke: 'red'
})
.add();
Deffine your plot lines on YAxis like this. Demo
yAxis: {
title: {
...
},
plotLines: [{
value: minValue,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Last quarter minimum'
}
}, {
value: maxValue,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Last quarter maximum'
}
}]
}
EDIT
In addition to, if you want to align the plotLines to the left you can try this:
Highcharts.Renderer.prototype.symbols.hline = function(x, y, width, height) {
return ['M',x*2,y + height,'L',0,y + width];
};
DEMO

Highcharts: y-axis labels are missing

I've written dozens of these charts and have never had this problem. My y-axis labels aren't showing up in this particular chart:
$(function () {
$('#container').highcharts({
chart: {
alignTicks: false,
animation: {
animation: false
},
height: 180,
reflow: true,
width: 425,
zoomType: 'x'
},
credits: {
enabled: false
},
legend: {
enabled: false,
layout: 'horizontal'
},
plotOptions: {
line: {
animation: false,
marker: {
radius: 0
},
stickyTracking: false,
turboThreshold: 5000000,
zIndex: 1
},
spline: {
animation: false,
marker: {
radius: 0
},
turboThreshold: 5000
}
},
title: {
text: ''
},
tooltip: {
backgroundColor: '#303030',
borderColor: 'white',
borderRadius: 0,
borderWidth: 1,
style: {
font: '20pt [FontFamily: Name=Microsoft Sans Serif]',
padding: '10px',
color: 'white'
},
valueDecimals: 0,
valueSuffix: 'F'
},
xAxis: {
categories: ['Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'],
lineColor: 'black',
lineWidth: 2
},
yAxis: {
endOnTick: false,
gridLineWidth: 0,
lineWidth: 2,
maxPadding: 0,
minPadding: 0,
startOnTick: false,
id: 'ForecastData',
lineColor: 'black',
linkedTo: 0,
offset: 0,
title: {
text: ''
},
type: "linear"
},
exporting: {
buttons: {
exportButton: {
enabled: false
},
printButton: {
enabled: false
}
},
enabled: false
},
series: [{
data: [33, 31, 35, 33, 36, 37, 36],
labelText: 'Daily Min Temperature',
name: 'Daily Min Temperature',
type: 'spline',
color: '#2177E0'
}]
});
});
http://jsfiddle.net/5QBzv/
I can't seem to figure out what I'm missing. Any ideas?
Thanks!
Try replacing your x and y axis with this
xAxis: {
categories: ['Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'],
lineColor: 'black',
lineWidth: 2
},
yAxis: {
title: {
text: 'DATA'
},
lineColor: 'black',
lineWidth: 2
categories: ['1', '2', '3', '4', '5', '6', '7'],
},
Or remove the linkedTo from your code.

Highcharts: X-axis labels inside columns

I would like to place my X-axis labels inside my columns and rotated to a vertical position. I've searched the web endlessly, but as of now, nothing seems to work, so I'll try and post my specific problem.
Here's the fiddle:
http://jsfiddle.net/D43q9/1/
$(document).ready(function() {
function chart() {
var change = {
0: '',
25: '',
50: '',
75: '',
100: ''
};
$('#chart').highcharts({
legend: {
enabled: false
},
tooltip: {
enabled: false
},
chart: {
type: 'column',
marginTop: 0,
backgroundColor: 'transparent',
spacingTop: 0,
spacingRight: 20,
spacingBottom: 20,
spacingLeft: 20
},
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0,
groupPadding: 0.025
}
},
title: {
text: ''
},
xAxis: {
categories: ['Col1','Col2','Col3','Col4','Col5','Col6'],
labels: {
style: {
color: '#000',
font: '14px Nunito',
top: '100px'
},
},
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0
},
yAxis: {
max: 101,
labels: {
formatter: function() {
var value = change[this.value];
return value !== 'undefined' ? value : this.value;
},
style: {
color: '#fff',
font: '12px Nunito'
}
},
title: {
text: null
},
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: '#444',
gridLineColor: '#444'
},
credits: {
enabled: false
},
series: [{
name: '',
data: [95,70,80,60,100,75],
color: '#ffd800',
borderColor: 'transparent'
}]
});
};
chart();
});
Set rotation and y value for labels: http://jsfiddle.net/D43q9/2/
xAxis: {
categories: ['Col1','Col2','Col3','Col4','Col5','Col6'],
labels: {
rotation: -90,
y: -20,
style: {
color: '#000',
font: '14px Nunito',
top: '100px'
},
},
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0
}

Categories