HIGHCHARTS: Border around chart legend is cut off at bottom
The thin black border around my chart legend is cut off at the bottom (image below).
This is happening in the browser and on PNG export.
The issue is caused by the adapt-chart-to-legend plugin, without which the chart is vertically short and lacks resolution on the y axis
See https://jsfiddle.net/SirMunchington/vbt6q7rk/5/ (code below)
The issue appears to persist regardless of the number of chart elements in the legend.
Highcharts.chart('container', {
"title": {
"text": "Goal Name: Test Goal #4",
"style": {
"color": "#274b6d",
"fontSize": "16px"
}
},
"subtitle": {
"text": "Scenario Name: New Try"
},
"colors": [
"#f28f43",
"#bc8321",
"#2f7ed8",
"#9370db",
"#1aadce",
"#8bbc21",
"#c42525"
],
"chart": {
"reflow": true,
"backgroundColor": "transparent",
"borderRadius": 5,
"events": {}
},
"plotOptions": {
"series": {
"label": {
"connectorAllowed": true
},
"pointStart": 2018,
"animation": false,
"enableMouseTracking": true,
"stickyTracking": false,
"shadow": false
},
"line": {
"animation": false,
"enableMouseTracking": true,
"shadow": false,
"marker": {
"enabled": true
}
}
},
"legend": {
"borderColor": "#000000",
"borderRadius": 5,
"borderWidth": 1,
"useHTML": true,
"adjustChartSize": true,
"itemHiddenStyle": {
"color": "#8e8e8e"
},
"itemStyle": {
"fontWeight": "normal",
"color": "#274b6d"
},
"itemDistance": 10,
"symbolRadius": 2,
"alignColumns": false
},
"credits": {
"enabled": false
},
"xAxis": {
"type": "datetime",
"labels": {},
"showLastLabel": false,
"tickPositions": [
1498892400000,
1530428400000,
1561964400000,
1593586800000,
1625122800000,
1656658800000,
1688194800000,
1719817200000,
1751353200000,
1782889200000
],
"endOnTick": true,
"startOnTick": true,
"maxPadding": 0,
"minPadding": 0,
"tickLength": 5,
"title": {
"text": "Fiscal Year",
"style": {
"color": "#4d759e",
"fontWeight": "bold"
}
},
"plotLines": [
{
"color": "rgba(0, 0, 0, 0.3)",
"width": 1,
"value": 1561964399999,
"dashStyle": "longdash"
},
{
"color": "rgba(0, 0, 0, 0.8)",
"width": 1,
"value": 1723558819561,
"dashStyle": "longdash"
},
{
"color": "rgba(100, 150, 100, 0.5)",
"width": 1,
"value": 1751342400000,
"dashStyle": "longdash"
},
{
"color": "#f28f43",
"width": 1,
"value": 1656648000000,
"dashStyle": "longdash"
}
]
},
"yAxis": {
"tickLength": 5,
"title": {
"text": "Annual Energy consumed (kWh)",
"style": {
"color": "#4d759e",
"fontWeight": "bold"
}
}
},
"series": [
{
"type": "line",
"name": "Consumption (Actual)",
"color": "#000000",
"lineWidth": 2,
"marker": {
"symbol": "circle"
},
"legendIndex": 1,
"tooltip": {
"valueDecimals": 0,
"outside": true,
"useHTML": true,
"headerFormat": "<span style=\"font-weight:bold; color:{series.color};\">{series.name}</span><br />"
},
"data": [
[
1530428399999,
3500000
],
[
1561964399999,
750000
],
[
1561964399999,
123000
],
[
1593586799999,
64436656.991663404
],
[
1625122799999,
14653553.51
]
]
},
{
"type": "spline",
"name": "Projected consumption (Big Picture: Scenario + Background Projects)",
"color": "rgb(0, 88, 33)",
"marker": {
"symbol": "triangle-down"
},
"dashStyle": "Dash",
"legendIndex": 6,
"tooltip": {
"outside": true,
"useHTML": true,
"headerFormat": "<span style=\"font-weight:bold; color:{series.color};\">{series.name}</span><br />"
},
"data": [
[
1726790400000,
-128904043.47014609
],
[
1726876800000,
-128904043.47014609
],
[
1770854400000,
-129011974.18085411
],
[
1770940800000,
-129011974.18085411
],
[
1771027200000,
-129011974.18085411
],
[
1771113600000,
-129011974.18085411
],
[
1771200000000,
-129011974.18085411
],
[
1771286400000,
-129011974.18085411
],
[
1771372800000,
-129011974.18085411
],
[
1771459200000,
-129011974.18085411
],
[
1771545600000,
-129011974.18085411
],
[
1771632000000,
-129011974.18085411
],
[
1771718400000,
-129011974.18085411
],
[
1771804800000,
-129011974.18085411
],
[
1771891200000,
-129011974.18085411
],
[
1771977600000,
-129011974.18085411
],
[
1772064000000,
-129011974.18085411
],
[
1772150400000,
-129011974.18085411
],
[
1772236800000,
-129011974.18085411
],
[
1772323200000,
-129011974.18085411
],
[
1772409600000,
-129011974.18085411
],
[
1772496000000,
-129011974.18085411
],
[
1772582400000,
-129011974.18085411
],
[
1772668800000,
-129011974.18085411
],
[
1772755200000,
-129011974.18085411
],
[
1772841600000,
-129011974.18085411
],
[
1772928000000,
-129011974.18085411
],
[
1773014400000,
-129011974.18085411
],
[
1773100800000,
-129011974.18085411
],
[
1773187200000,
-129011974.18085411
],
[
1773273600000,
-129011974.18085411
],
[
1773360000000,
-129011974.18085411
],
[
1773446400000,
-129011974.18085411
],
[
1773532800000,
-129011974.18085411
],
[
1773619200000,
-129011974.18085411
],
[
1773705600000,
-129011974.18085411
],
[
1773792000000,
-129011974.18085411
],
[
1773878400000,
-129011974.18085411
],
[
1773964800000,
-129011974.18085411
],
[
1774051200000,
-129011974.18085411
],
[
1774137600000,
-129011974.18085411
],
[
1774224000000,
-129011974.18085411
],
[
1774310400000,
-129011974.18085411
],
[
1774396800000,
-129011974.18085411
],
[
1774483200000,
-129011974.18085411
],
[
1774569600000,
-129011974.18085411
],
[
1774656000000,
-129011974.18085411
],
[
1774742400000,
-129011974.18085411
],
[
1774828800000,
-129011974.18085411
],
[
1774915200000,
-129011974.18085411
],
[
1775001600000,
-129011974.18085411
],
[
1775088000000,
-129011974.18085411
],
[
1775174400000,
-129011974.18085411
],
[
1775260800000,
-129011974.18085411
],
[
1775347200000,
-129011974.18085411
],
[
1775433600000,
-129011974.18085411
],
[
1775520000000,
-129011974.18085411
],
[
1775606400000,
-129011974.18085411
],
[
1775692800000,
-129011974.18085411
],
[
1775779200000,
-129011974.18085411
],
[
1775865600000,
-129011974.18085411
],
[
1775952000000,
-129011974.18085411
],
[
1776038400000,
-129011974.18085411
],
[
1776124800000,
-129011974.18085411
],
[
1776211200000,
-129011974.18085411
],
[
1776297600000,
-129011974.18085411
],
[
1776384000000,
-129011974.18085411
],
[
1776470400000,
-129011974.18085411
],
[
1776556800000,
-129011974.18085411
],
[
1776643200000,
-129011974.18085411
],
[
1776729600000,
-129011974.18085411
],
[
1776816000000,
-129011974.18085411
],
[
1776902400000,
-129011974.18085411
],
[
1776988800000,
-129011974.18085411
],
[
1777075200000,
-129011974.18085411
],
[
1777161600000,
-129011974.18085411
],
[
1777248000000,
-129011974.18085411
],
[
1777334400000,
-129011974.18085411
],
[
1777420800000,
-129011974.18085411
],
[
1777507200000,
-129011974.18085411
],
[
1777593600000,
-129011974.18085411
],
[
1777680000000,
-129011974.18085411
],
[
1777766400000,
-129011974.18085411
],
[
1777852800000,
-129011974.18085411
],
[
1777939200000,
-129011974.18085411
],
[
1778025600000,
-129011974.18085411
],
[
1778112000000,
-129011974.18085411
],
[
1778198400000,
-129011974.18085411
],
[
1778284800000,
-129011974.18085411
],
[
1778371200000,
-129011974.18085411
],
[
1778457600000,
-129011974.18085411
],
[
1778544000000,
-129011974.18085411
],
[
1778630400000,
-129011974.18085411
],
[
1778716800000,
-129011974.18085411
],
[
1778803200000,
-129011974.18085411
],
[
1778889600000,
-129011974.18085411
],
[
1778976000000,
-129011974.18085411
],
[
1779062400000,
-129011974.18085411
],
[
1779148800000,
-129011974.18085411
],
[
1779235200000,
-129011974.18085411
],
[
1779321600000,
-129011974.18085411
],
[
1779408000000,
-129011974.18085411
],
[
1779494400000,
-129011974.18085411
],
[
1779580800000,
-129011974.18085411
],
[
1779667200000,
-129011974.18085411
],
[
1779753600000,
-129011974.18085411
],
[
1779840000000,
-129011974.18085411
],
[
1779926400000,
-129011974.18085411
],
[
1780012800000,
-129011974.18085411
]
]
},
{
"type": "scatter",
"name": "Progress To Date (Projected)",
"color": "#000000",
"marker": {
"symbol": "circle",
"radius": 5
},
"legendIndex": 7,
"tooltip": {
"enabled": true,
"useHTML": true,
"outside": true,
"headerFormat": "<span style=\"font-weight:bold; color:{series.color};\">{series.name}</span><br />"
},
"data": [
[
1723558819561,
-128904043.47014609
]
]
},
{
"type": "scatter",
"name": "Primary Target",
"color": "#649664",
"marker": {
"symbol": "diamond",
"radius": 5
},
"legendIndex": 10,
"tooltip": {
"enabled": true,
"valueDecimals": 0,
"useHTML": true,
"headerFormat": "<span style=\"font-weight:bold; color:{series.color};\">{series.name}</span><br />"
},
"data": [
[
1751342400000,
100000
]
]
}
],
"exporting": {
"chartOptions": {
"chart": {
"reflow": true,
"backgroundColor": "#ffffff"
}
},
"sourceWidth": 1250,
"sourceHeight": 500,
"scale": 2,
"fallbackToExportServer": false,
"buttons": {
"contextButton": {
"enabled": false
}
}
}
});<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://rawgithub.com/highcharts/adapt-chart-to-legend/master/adapt-chart-to-legend.js"></script>
<div id="container"></div>Solution
I noticed that in your case, the problem is with just one pixel. So, the simplest solution, in my opinion, would be to correct translateY value by one pixel (line 28 in the demo below).
Demo: https://jsfiddle.net/BlackLabel/yapcx0bh/
else if (this.options.verticalAlign === 'bottom') {
translateY = chart.originalChartHeight; // #2
this.group.attr('translateY', translateY - 1);
if (this.group.alignAttr) {
this.group.alignAttr.translateY = translateY;
}
}
- Highcharts pareto charts showing more than 100% on y-axis
- Duration of point update animation using highchartProxy
- How to do mouse over x-Axis[Cateogories] in High charts when you mouse over the x-Axis [Category]
- How to capture the hover event in highcharts labels?
- Want to move y-axis scrollbar with mouse wheel in highcharts/highstock
- Hicharts Export Server - ERR_REQUIRE_ESM
- Highcharts adds duplicate xmlns attribute to SVG element in IE
- Higcharts annotations for Wordcloud and Dependency wheel
- HIGHCHARTS: Border around chart legend is cut off at bottom
- How can create the following column chart at highchart?
- Higcharts annotations for various chart types
- Import Pictorial chart
- Double finger zoom not keeping the highchart in sync with the navigator
- Highcharts Cannot read properties of undefined (reading 'series')
- Highcharts error 15
- Rendering Issue: Series line/marker getting cut off by yAxis line chart highcharts
- Highcharts.js fullscreen api isOpen not working?
- Disable-Click on Legend in HighCharts Column Graph
- TypeError: Cannot read properties of undefined (reading 'hour') when replacing the sample data using MT5 Data
- Exporting Highcharts with title background or border not working
- Adding click event to plotLine in Highcharts
- highcharts: stop chart from trapping mouse events, or capture mouse click on the ENTIRE chart
- In React js unable to get waterfall chart using Highcharts library
- highcharts: disable hover on column chart when i use two chart togheder
- Highcharts Piechart 3D Tooltip not showing on slice/chart hover
- Highcharts Heatmap yAxis labels not rendering properly
- Highcharts Area graph, use 2 fill colors above / below X axis
- Highcharts - How to get a value of a stack in a series?
- Scatter Chart Not Updating Correctly for multiple Values at the Same Location
- Highcharts Polar Chart customization