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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.