score:1
Accepted answer
You are setting border styling for the bottom portion only. You need to change your CSS styling for td and th tag to this
td, th {
padding: 5px;
border: 1px solid silver;
height: 20px;
}
/**
* Create a constructor for sparklines that takes some sensible defaults and merges in the individual
* chart options. This function is also available from the jQuery plugin as $(element).highcharts('SparkLine').
*/
Highcharts.SparkLine = function (a, b, c) {
var hasRenderToArg = typeof a === 'string' || a.nodeName,
options = arguments[hasRenderToArg ? 1 : 0],
defaultOptions = {
chart: {
renderTo: (options.chart && options.chart.renderTo) || this,
backgroundColor: null,
borderWidth: 0,
type: 'area',
margin: [2, 0, 2, 0],
width: 120,
height: 20,
style: {
overflow: 'visible'
},
// small optimalization, saves 1-2 ms each sparkline
skipClone: true
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
title: {
text: null
},
startOnTick: false,
endOnTick: false,
tickPositions: []
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
legend: {
enabled: false
},
tooltip: {
backgroundColor: null,
borderWidth: 0,
shadow: false,
useHTML: true,
hideDelay: 0,
shared: true,
padding: 0,
positioner: function (w, h, point) {
return { x: point.plotX - w / 2, y: point.plotY - h };
}
},
plotOptions: {
series: {
animation: false,
lineWidth: 1,
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
marker: {
radius: 1,
states: {
hover: {
radius: 2
}
}
},
fillOpacity: 0.25
},
column: {
negativeColor: '#910000',
borderColor: 'silver'
}
}
};
options = Highcharts.merge(defaultOptions, options);
return hasRenderToArg ?
new Highcharts.Chart(a, options, c) :
new Highcharts.Chart(options, b);
};
var start = +new Date(),
$tds = $('td[data-sparkline]'),
fullLen = $tds.length,
n = 0;
// Creating 153 sparkline charts is quite fast in modern browsers, but IE8 and mobile
// can take some seconds, so we split the input into chunks and apply them in timeouts
// in order to avoid locking up the browser process and allow interaction.
function doChunk() {
var time = +new Date(),
i,
len = $tds.length,
$td,
stringdata,
arr,
data,
chart;
for (i = 0; i < len; i += 1) {
$td = $($tds[i]);
stringdata = $td.data('sparkline');
arr = stringdata.split('; ');
data = $.map(arr[0].split(', '), parseFloat);
chart = {};
if (arr[1]) {
chart.type = arr[1];
}
$td.highcharts('SparkLine', {
series: [{
data: data,
pointStart: 1
}],
tooltip: {
headerFormat: '<span style="font-size: 10px">' + $td.parent().find('th').html() + ', Q{point.x}:</span><br/>',
pointFormat: '<b>{point.y}.000</b> USD'
},
chart: chart
});
n += 1;
// If the process takes too much time, run a timeout to allow interaction with the browser
if (new Date() - time > 500) {
$tds.splice(0, i + 1);
setTimeout(doChunk, 0);
break;
}
// Print a feedback on the performance
if (n === fullLen) {
$('#result').html('Generated ' + fullLen + ' sparklines in ' + (new Date() - start) + ' ms');
}
}
}
doChunk();
#result {
text-align: right;
color: gray;
min-height: 2em;
}
#table-sparkline {
margin: 0 auto;
border-collapse: collapse;
}
th {
font-weight: bold;
text-align: left;
}
td, th {
padding: 5px;
border: 1px solid silver;
height: 20px;
}
thead th {
border-top: 2px solid gray;
border-bottom: 2px solid gray;
}
.highcharts-tooltip>span {
background: white;
border: 1px solid silver;
border-radius: 3px;
box-shadow: 1px 1px 2px #888;
padding: 8px;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="result"></div>
<table id="table-sparkline">
<thead>
<tr>
<th>State</th>
<th>Income</th>
<th>Income per quarter</th>
<th>Costs</th>
<th>Costs per quarter</th>
<th>Result</th>
<th>Result per quarter</th>
</tr>
</thead>
<tbody id="tbody-sparkline">
<tr>
<th>Alabama</th>
<td>254</td>
<td data-sparkline="71, 78, 39, 66 "/>
<td>296</td>
<td data-sparkline="68, 52, 80, 96 "/>
<td>-42</td>
<td data-sparkline="3, 26, -41, -30 ; column"/>
</tr>
<tr>
<th>Alaska</th>
<td>246</td>
<td data-sparkline="87, 44, 74, 41 "/>
<td>181</td>
<td data-sparkline="29, 54, 73, 25 "/>
<td>65</td>
<td data-sparkline="58, -10, 1, 16 ; column"/>
</tr>
</tbody>
</table>
Source: stackoverflow.com
Related Query
- How to make border for sparkline highcharts table?
- How to make highcharts default to 0 for missing data
- Highcharts - How to make a scatter plot with multiple series from HTML table
- How to make legend color show up in Highcharts for a line graph under certain conditions?
- How to Make a Dashed Bar Chart Border in Highcharts
- how to add dashed border on highcharts "area" graph for every point
- Highcharts display label for pie chart using html table as data source
- How to set border for a highcharts pie?
- Highcharts how to make a set number of colors for pie chart data and drilldown data
- Highcharts Sparkline chart with dynamic data for table -Angular js
- How to make hover effect for two bar in highcharts at the same time is there any way by using css or any inbuilt method to achieve this?
- HTML table as data source for highstock charts using highcharts
- How to draw an outer border for a donut chart - Highcharts
- how to set border radius for stacked bar in highcharts
- How to Make Transparent Border Highcharts pie
- HIGHCHARTS How to to make separate colors for shaded region and the line in Area Graph
- How to make highcharts scrollable horizontally when having big range in x-axis
- How can I remove the white border from HighCharts pie chart?
- Highcharts - How to set custom colors for the series
- How to set a static minimum value for axes in Highcharts
- how to make highcharts pie datalabels always in center of each slice?
- HighCharts box-plot: how to make it horizontal
- Different border for selected column in highcharts
- How do I make each row in a HTML table a pie chart in Highcharts?
- How to output JSON in python so it can be used for Geckoboard's Highcharts plugin
- Make Highcharts border color match background color on column chart
- How to make a pie chart from highcharts responsive
- Using PhantomJS to create HighCharts grahps server side for use in PDF creation (PHP) - results in exit code 11 from PHPs exec();
- How to completely disable the mouse/finger interaction for highcharts
- Need to make tooltip border color same as marker color using Highcharts
More Query from same tag
- Highcharts PHP JSON - correct data format
- Dynamic PDF from html that contains Javascript
- highcharts - removing decimal places on Y axis with only one point
- HighCharts Drilldown - colorByPoint
- How to know information about the clicked bar in highchart column r shiny plot
- Highcharts drilldown in stacked area chart
- Highcharts define colors for each data point in a pair
- Highcharts Date Time With Irregular Intervals Down to Minutes
- How dynamically set the zoom level on highcharts?
- How to create navigation column chart in stacked column high chart
- Highcharts: Change Highlight Color of Column Chart
- Highcharts Angular - How to set chart width and height with percentages?
- How to convert an object array DataTable recognizes to something Highcharts recognizes?
- How to pass a JavaScript variable to JQuery
- HighCharts one y axis automatic for each serie
- HighMaps Undefined ZoomTo()
- Highcharts standalone framework with highcharts-ng, angular. Animation issue
- Backbone Model caching and fetching locally
- how to display data into linear highChart?
- HighChart highlight point
- how to convert svg to png image in internet Explorer?
- Can highcharts stacked percentage column chart be less than 100%
- Highcharts series name with '<' not rendered in tooltip
- highchart giving no output
- How do you add specific hyperlinks to highcharts line charts?
- How can I let some Categories have a drilldown and others not?
- Highcharts: how to get the point category clicked on when drilling down?
- What's the matter with the STEP parameter in my Highcharts graph?
- Exiting full screen does not re-render graph to same size in highcharts exporting at angular 7
- Add clickable link to tooltip in Highcharts Scatter Plot