Kendo UI绘制水平线条：调整线宽及轴最小值设置问题

Great question! Let's break down how to solve your two key requirements: adjusting the thickness of your warning lines and making sure they stay visible even when your series values are small.

1. Adjust Plot Band Line Thickness #

Right now, you're using a narrow to - from range to simulate a line, which can look inconsistent across large value ranges (like 3k vs 350k). Kendo UI's plotBands has a dedicated thickness property to define line width directly—this is the cleanest and most reliable approach.

Instead of creating a thin band, set from and to to the same value, then specify your desired line thickness in pixels:

plotBands: [
    // Green warning line at warningMax
    { from: warningMax, to: warningMax, color: "green", thickness: 3 },
    // Red warning line at WarningMin
    { from: WarningMin, to: WarningMin, color: "red", thickness: 3 }
]

Tweak the thickness value to make the lines thicker or thinner as needed.

2. Ensure Warning Lines Stay Visible (Set Axis Min/Max) #

To keep your red warning line visible at the top (or any warning line within the chart view) when series values are small, you need to manually define the value axis's min and max to include your warning thresholds.

First, calculate the extreme values from your series data, then adjust the axis bounds to cover both your data and warning values with a small buffer for better visibility:

// Calculate min/max values from all series data
let seriesMin = Infinity;
let seriesMax = -Infinity;
data.series.forEach(series => {
    series.data.forEach(point => {
        if (point < seriesMin) seriesMin = point;
        if (point > seriesMax) seriesMax = point;
    });
});

// Add a 10% buffer relative to your warning range to avoid edge cutoff
const buffer = (warningMax - WarningMin) * 0.1;
const axisMin = Math.min(seriesMin, WarningMin - buffer);
const axisMax = Math.max(seriesMax, warningMax + buffer);

Then add these min and max properties to your value axis configuration.

Full Modified Chart Code #

// Calculate axis bounds first
let seriesMin = Infinity;
let seriesMax = -Infinity;
data.series.forEach(series => {
    series.data.forEach(point => {
        if (point < seriesMin) seriesMin = point;
        if (point > seriesMax) seriesMax = point;
    });
});

const buffer = (warningMax - WarningMin) * 0.1;
const axisMin = Math.min(seriesMin, WarningMin - buffer);
const axisMax = Math.max(seriesMax, warningMax + buffer);

// Initialize chart
$("#DivId").kendoChart({ 
    theme: 'bootstrap', 
    title: { text: "Title Name", font: "bold 24px Arial,Helvetica,sans-serif", color: "black" }, 
    legend: { position: "bottom" }, 
    chartArea: { background: "" }, 
    seriesDefaults: { 
        type: "line", 
        style: "smooth", 
        labels: { visible: false, format: "{0:c}" } 
    }, 
    series: data.series, 
    valueAxes: [{ 
        name: "axesName1", 
        min: axisMin,
        max: axisMax,
        plotBands: [ 
            { from: warningMax, to: warningMax, color: "green", thickness: 3 }, 
            { from: WarningMin, to: WarningMin, color: "red", thickness: 3 } 
        ], 
        title: { text: "Axes Name1" }, 
        labels: { format: "n0" }, 
        color: "#428bca" // Dark Blue 
    }, { 
        name: "axesName2", 
        title: { text: "Axes Name2" }, 
        labels: { format: "p2" }, 
        color: "#5cb85c" // Green 
    }], 
    categoryAxis: { 
        categories: data.categories, 
        axisCrossingValues: [0, 31], 
        majorGridLines: { visible: false }, 
        labels: { rotation: "auto" } 
    } 
});

Key Notes: #

• The buffer ensures your warning lines aren't cut off at the edge of the chart area.
• If you specifically want the red line to stay at the top regardless of data, you can set axisMax directly to warningMax + buffer (skip the Math.max check with seriesMax).
• This approach works seamlessly for any value range (3k or 350k) since the buffer is relative to your warning threshold difference.

内容的提问来源于stack exchange，提问作者Carlos Siestrup