Как выделить две полосы для нормы в графике chartjs?

Question

[anriko]

тут указано 2 границы которые надо выделить и если можно то и значения выделить другим цветом
и как правильно внести данные чтобы слева было мкмоль/л и как сделать график с годами внизу чтобы при приближении были даты


сделал с помощью старой версии Chart ,с помощью новой не вышло

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.5/chartjs-plugin-annotation.min.js"></script>
    <section class="result-test" id="result-test">
        <p class="cabinet-section-title">
           На  этой странице Вы можете исследовать Вашу персональную программу лечения/коррекции
        </p>
        <div class="container">
      <div class="row">
        <div class="col-md-7 result-analiz-chart">
            <canvas id="myChart" width="400" height="400"></canvas>
            <script>
                var ctx = document.getElementById('myChart').getContext('2d');

                var marketing = [12, 35];
                var amount = [12, 35];
                // populate 'annotations' array dynamically based on 'marketing'
                var annotations = marketing.map(function (date, index) {
                    return {
                        type: 'line',
                        id: 'vline' + index,
                        mode: 'horizontal',
                        scaleID: 'y-axis-0',
                        value: date,
                        borderColor: 'green',
                        borderWidth: 1,
                        label: {
                            enabled: true,
                            position: "center",
                            content: amount[index]
                        }
                    }
                });


                var myChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: ['2009-04-11', '2012-04-11', '2014-04-10', '2016-04-11', '2017-04-11', '2018-04-11', '2021-04-10', '2009-04-11', '2012-04-11', '2014-04-11', '2016-04-11', '2017-04-11', '2018-04-11', '2021-04-11'],
                        datasets: [{
                            label: '40 мкмоль/л',
                            data: [0, 8.5, 12, 18, 20.5, 40, 18, 8.5, 12, 18, 20.5, 40, 18, 24],
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            x: {
                                beginAtZero: true,
                                ticks: {
                                    color: 'red',
                                },
                                grid: {
                                    borderColor: 'red'
                                }
                            },

                            y: {
                                stacked: true,
                                title: {
                                    display: true,
                                    text: 'мкмоль/л',
                                    color: 'red',
                                    ticks: {
                                        color: 'red',
                                    }
                                }
                            }
                        },
                        annotation: {
                            drawTime: 'afterDatasetsDraw',
                            annotations: annotations
                        }
                    }

                });


            </script>

Comments

[Vladimir]

а где код?

[anriko]

Vladimir, поправил

[Vladimir]

честно говоря не вижу где в коде данные по этим двум линиям. Точно это всё?

[anriko]

Vladimir, вот данные по линиям

var marketing = [12, 35];
                var amount = [12, 35];
                // populate 'annotations' array dynamically based on 'marketing'
                var annotations = marketing.map(function (date, index) {
                    return {
                        type: 'line',
                        id: 'vline' + index,
                        mode: 'horizontal',
                        scaleID: 'y-axis-0',
                        value: date,
                        borderColor: 'green',
                        borderWidth: 1,
                        label: {
                            enabled: true,
                            position: "center",
                            content: amount[index]
                        }
                    }
                });

[Vladimir]

ну если это они, в чем я слегка сомневаюсь, тогда просто попробуйте изменить цвет borderColor: 'black' посмотрите, поменяется ли

[anriko]

Vladimir, да поменялось,но я не могу перейти на новую версию этого плагина синтаксис не работает этот

[Vladimir]

anriko, а какая версия chartjs?
Вообще лучше перейти

[anriko]

Vladimir,

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.5/chartjs-plugin-annotation.min.js"></script>
    <section class="result-test" id="result-test">

[Vladimir]

anriko, я использовал Chart.js-2.9.4.
...

let mixedChart =
		new Chart(
					ctx,
					{
							type: 'bar',//для данных столбики
						data:
						{
							datasets: array_datasets,
							labels: array_labels
						},
    	options: chartOptions
					});

...
а в array_datasets перед этим добавил константу для линии - это как раз даёт горизонтальную черту:

array_constant = [10,10,10, .... n]; //n  одинаковая для всех графиков, в том числе и для горизонтальных линий

constant = 
	{
			label: 'название линии',
			data: array_constant,//значение y для линии
			backgroundColor: 'rgba(0, 0, 0, 0)',
			borderColor: 'rgba(255, 215, 0, 1)',
			borderDash: [2, 1],
			yAxisID: 'y-axis',
			type: 'line'//а здесь для горизонтальной линии меняем на line
	};
	array_datasets.push(constant);