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

//тут лежит json
// let data = {!! json_encode($arrRois) !!};
// console.log(data);
//********его вывод
//{1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…}, 6: {…}}
// 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}

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: {
                tickPixelInterval: 50,
                categories: [ //как сюда засунть месяцы
                    'Январь',
                    'Февраль',
                    'Март',
                    'Апрель',
                    'Май',
                    'Июнь',
                    'Июль'
                ],
                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: [300.22, 402.26, 385.89, 556.56, 412.38, 190.15, 220.22], //как сюда засунуть sum
                marker: {
                    enabled: false
                }
            }]
        });