<script src="https://code.highcharts.com/highcharts.js"></script>
<svg style="height: 0">
<defs>
<linearGradient id="gradient-0" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" />
<stop offset="1" />
</linearGradient>
</defs>
</svg>
<div id="graph-left"></div>
@import 'https://code.highcharts.com/css/highcharts.css';
.center-wrp-left {
height: 344px;
background: #FFFFFF;
box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.06);
border-radius: 22px;
margin-right: 12px;
width: calc(110% / 3);
display: flex;
flex-direction: column;
}
.center-wrp-left-header {
font-style: normal;
font-weight: 600;
font-size: 15px;
line-height: 20px;
letter-spacing: 0.01em;
color: #192A3E;
border-bottom: 1px solid #EBEFF2;
padding: 16px 0 17px 24px;
}
.center-wrp-left-text::before {
content: url("data:image/svg+xml;charset=UTF-8,%3csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='4' cy='4' r='3' stroke='%2363DFFB' stroke-width='2'/%3e%3c/svg%3e ");
position: absolute;
top: 16px;
left: 24px;
}
.center-wrp-left-text {
font-family: Poppins;
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 15px;
letter-spacing: 0.01em;
color: #192A3E;
position: relative;
padding: 16px 0 21px 40px;
}
#graph-left {
height: 410px;
padding: 0 24px 19px 24px;
}
#gradient-0 stop {
stop-color: #39d9ff;
}
#gradient-0 stop[offset="0"] {
stop-opacity: 0.75;
}
#gradient-0 stop[offset="1"] {
stop-opacity: 0;
}
.highcharts-color-0 .highcharts-area {
fill-opacity: 0.2;
fill: url(#gradient-0);
}
.highcharts-color-0 {
fill: #ffffff;
stroke: #39d9ff;
}
.tooltip1 {
boder: 1px solid black;
border-radius: 1.2rem;
background-color: rgba(0, 0, 0, 0.5);
padding: 5px 10px;
color: white;
}
.highcharts-tooltip-box {
fill: none;
padding: 0;
fill-opacity: 0.6;
stroke-width: 0;
}
.highcharts-tooltip text {
fill: white;
text-shadow: 0 0 3px black;
}
.highcharts-xaxis-grid .highcharts-grid-line {
stroke-width: 1px;
stroke: #D3D8DD;
}
.highcharts-yaxis-grid .highcharts-grid-line {
stroke-width: 1px;
stroke: #D3D8DD;
stroke-dasharray: 10, 12;
}
.footer-nav-dashboard {
margin: 42px 0 0 -288px !important;
}
.highcharts-axis-labels {
top: 10px !important;
}
.highcharts-axis-line {
display: none;
}
let obj = {
1: {0: "9,00", mouth: "Ноябрь", sum: 38},
2: {0: "-1,00", mouth: "Декабрь", sum: 37},
3: {0: "96,00", mouth: "Январь", sum: 133},
4: {0: "-101,80", mouth: "Февраль", sum: 31.2},
5: {0: "-21,20", mouth: "Март", sum: 10},
6: {0: "10,00", mouth: "Апрель", sum: 20},
}
let sum = [0], mouth = [''];
for (let i = 1; i <= Object.keys(obj).length; i++) {
mouth[i] = obj[i].mouth;
sum[i] = obj[i].sum;
}
mouth[mouth.length] = '';
sum[sum.length] = 0;
console.log(mouth)
console.log(sum)
Highcharts.chart('graph-left', {
chart: {
type: 'areaspline',
styledMode: true
},
title: {
text: '',
align: 'left',
style: {
display: 'none'
}
},
tooltip: {
useHTML: true,
formatter: function() {
return '<div class="tooltip1">' + this.y +' ₽</div>'
},
},
xAxis: {
min: 0.75,
max: 6.25,
tickPixelInterval: 50,
categories: mouth,
tickmarkPlacement: 'on',
labels: {
useHTML: true,
},
},
yAxis: {
tickInterval:50,
title: {
text: ''
},
gridLineDashStyle: 'longdash'
},
plotOptions: {
series: {
pointPlacement: 'on'
},
},
credits: {
enabled: false
},
legend: {
enabled: false,
},
series: [{
name: '',
data: sum, //как сюда засунуть sum
marker: {
enabled: false
}
}]
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.