Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Chart. js shape coloring

I have a chart I created with Chart.js. In this chart, I have four points and these points are connected and a quadrilateral is obtained and the inside is colored green. But in this way, the y-axis points are painted higher even though they are lower, and the right place remains unpainted even though the points are lower. How can this unpainted area be painted?

 var ctx = document.getElementById('workingLimitGraph').getContext('2d');
        var minFluidOutletTemp = @Model.SerieLimits.Cooling_MinFluidOutletTemp;
        var maxFluidOutletTemp = @Model.SerieLimits.Cooling_MaxFluidOutletTemp;
        var minAmbientTemp = @Model.SerieLimits.Cooling_MinAmbientTemp;
        var maxAmbientTemp = @Model.SerieLimits.Cooling_MaxAmbientTemp;
        //added/subtracted values to expand chart axis values
        var xAxisMin = minFluidOutletTemp - 5;
        var xAxisMax = maxFluidOutletTemp + 5;
        var yAxisMin = minAmbientTemp - 10;
        var yAxisMax = maxAmbientTemp + 10;

        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [{
                    label: '',
                    data: [
                        { x: minFluidOutletTemp, y: minAmbientTemp },
                        { x: minFluidOutletTemp, y: maxAmbientTemp },
                        { x: maxFluidOutletTemp, y: maxAmbientTemp },
                        { x: maxFluidOutletTemp, y: minAmbientTemp }
                    ],
                    fill: true,
                    backgroundColor: 'rgba(0, 128, 0, 0.3)',
                    borderColor: 'rgba(0, 128, 0, 0.3)',
                    borderWidth: 1,
                    pointRadius: 5,
                    pointBackgroundColor: 'rgba(0, 128, 0, 0.3)',
                    pointBorderColor: 'rgba(0, 128, 0, 0.3)',
                    showLine: true
                }]
            },
            options: {
                maintainAspectRatio: false,
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Water Outlet Temperature (°C)'
                        },
                        ticks: {
                            stepSize: 1,
                            padding: 20,
                        },
                        grid: {
                            display: false
                        },
                        min: xAxisMin,
                        max: xAxisMax,
                        stepSize: 1,
                    },
                    y: {
                        title: {
                            display: true,
                            text: 'Ambient Air Temperature (°C)'
                        },
                        ticks: {
                            stepSize: 10,
                            padding: 20,
                        },
                        min: yAxisMin,
                        max: yAxisMax,
                        stepSize: 10,
                    }
                }
            }
        });

        // X ekseninin etiketlerini oluşturma
        var xAxisLabels = [];
        for (var i = minFluidOutletTemp - 3; i <= maxFluidOutletTemp + 3; i += 1) {
            xAxisLabels.push(i);
        }

        myChart.data.labels = xAxisLabels;
        // Y ekseninin etiketlerini oluşturma
        var yAxisLabels = [];
        for (var i = yAxisMin; i <= yAxisMax; i += 10) {
            yAxisLabels.push(i);
        }
        myChart.options.scales.y.ticks.callback = function (value, index, values) {
            return value;
        };

result

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I use this code on other pages, only my axis values are different. It works completely correctly on those pages. When I edited the code as follows, this time it connected 4 points correctly and created a rectangle, but this time it made the inside of this shape completely unpainted. Code:

    data: [
                        { x: minFluidOutletTemp, y: minAmbientTemp },
                        { x: minFluidOutletTemp, y: maxAmbientTemp },
                        { x: maxFluidOutletTemp, y: maxAmbientTemp },
                        { x: maxFluidOutletTemp, y: minAmbientTemp },
                        { x: minFluidOutletTemp, y: minAmbientTemp }
                    ],

    I added one more dot in data and the shape is correct. But I cannot paint this shape.

    This is the final version. How can I edit the code to paint inside this shape?


  2. 0

    Ensure Correct Order of Data Points
    eg.

    var data = [
{ x: minFluidOutletTemp, y: minAmbientTemp }, // Point 1
{ x: minFluidOutletTemp, y: maxAmbientTemp }, // Point 2
{ x: maxFluidOutletTemp, y: maxAmbientTemp }, // Point 3
{ x: maxFluidOutletTemp, y: minAmbientTemp } // Point 4

    ];

    Configure fill Option

    fill: true;

    specify backgroundColor

    backgroundColor: 'rgba(0, 128, 0, 0.3)',

    Ensure the y-axis scale is correctly configured to accommodate the range of your data points. This seems to be correctly set in your code with min: yAxisMin and max: yAxisMax.

    Ensure you are using a version of Chart.js that supports the features you are using. The fill option and dataset configuration are well-supported in Chart.js 2.x and later.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search