score:1
Accepted answer
You can make it with gridLineColor: 'transparent'
option:
colorAxis: {
min: 0,
minColor: '#FFFFFF',
gridLineColor: 'transparent', // <== !!!
maxColor: Highcharts.getOptions().colors[0]
},
Check the demo below:
function getPointCategoryName(point, dimension) {
var series = point.series,
isY = dimension === 'y',
axis = series[isY ? 'yAxis' : 'xAxis'];
return axis.categories[point[isY ? 'y' : 'x']];
}
Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null,
reversed: true
},
accessibility: {
point: {
descriptionFormatter: function (point) {
var ix = point.index + 1,
xName = getPointCategoryName(point, 'x'),
yName = getPointCategoryName(point, 'y'),
val = point.value;
return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';
}
}
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
gridLineColor: 'transparent',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
yAxis: {
labels: {
formatter: function () {
return this.value.charAt(0);
}
}
}
}
}]
}
});
.highcharts-figure, .highcharts-data-table table {
min-width: 360px;
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Heatmap showing employee data per weekday. Heatmaps are commonly used to
visualize hot spots within data sets, and to show patterns or correlations.
Due to their compact nature, they are often used with large sets of data.
</p>
</figure>
Source: stackoverflow.com
Related Query
- Highcharts - Heatmap - Legend remove white "dashes"
- How can I remove the white border from HighCharts pie chart?
- How do I remove the color swatch from my HighCharts legend without affecting the column?
- reverse highcharts heatmap legend
- Highcharts semi-pie - remove space between pie and legend
- Highcharts heatmap - disabling the legend results in different colors
- highcharts - how do I do custom labels on heatmap legend
- Highcharts Heatmap Legend Max
- Change the legend in highcharts heatmap to show instead of a color bar, a set of fixed icons with hide and show on click
- highcharts - Remove only legend for colorAxis (keep legend for series)
- How to remove the white outline/border on Highcharts 3D on setData?
- How to remove fine white line between halo and Highcharts pie chart
- Highcharts : remove custom legend tooltip from export
- Highcharts height issue - remove white space at the top. See JSFiddle :)
- Highcharts Heatmap Edit Legend
- Highcharts remove legend and series from chart on legendItemClick
- Remove Highcharts chart Y axis labels when legend clicked
- Highchart Heatmap remove empty rows on legend toggle
- How to remove tick lines from secondary y axis in highcharts heatmap graph
- HighCharts Hide Series Name from the Legend
- How to remove button from Highcharts
- Proper way to remove all series data from a highcharts chart?
- How to modify highcharts legend item click event?
- Hiding a Highcharts series without using the legend
- Remove shadow/background glow on highcharts data label?
- Disable-Click on Legend in HighCharts Column Graph
- Highcharts - Change legend index order
- Highcharts legend font sizes
- Highcharts remove zero value labels
- Highcharts - How to programmatically toggle legend items and determine which items are selected
More Query from same tag
- Highcharts - Line chart mark selected Point
- highcharts.js column/bar overlap (datetime Xaxis)
- How To Call A Function To Make A Graph Using HighCharts in PHP
- Timezone on Highcharts
- How to remove High Charts Gird Lines
- cant work live stock graph in android using json data url
- Adding a slider to a High Charts Treemap
- How to draw two series in the same chart that has different data time in xAxis
- Dynamically changeable Firebase URL
- Move handle of two related highstock charts at same time
- How to tie tooltips to the currently hovered SERIES, not just the point?
- jQuery/Javascript Charting library
- More Than 2 Y axis in Grafana
- How to use HighCharts dart library in Flutter app?
- Highcharts. Pie chart. DataLabels formatter
- Highcharts pattern fill how to bring the shapes closer together?
- Highmaps - how i can have a seperate legend by different report?
- How to update Highcharts with multiple series via JSON?
- Highcharts Backgroundimage for bar graph
- Change Highcharts Legend Display After Render
- CSS Style not getting applied to a series in Highchart
- How can I add an image in a specific date in xAxis in highstock?
- Highcharts / Highstock - toggle yaxis from compare to value and back to compare
- Multiple series of data in Highcharts but second line graph is displayed squashed?
- How to add negative area or background for a specific bar or pie chart in highcharts?
- Highchart gap like highstock
- Highlight the corresponding y axis on mouse overr over the bar chart based on that axis in highchart
- Updating highcharts.js data on a 'stacked columns' chart : update() or setData()?
- Highcharts data import JSON - formatting
- Click event in highcharter treemap (R shiny)