Develop Reference

How to fix formatting of axis labels in Highcharts when surrounding the contents with div?

Here is what the chart currently looks like:
I want to display a tooltip when somebody hovers over one of the X-axis labels. So for that I formatted them the following way (as suggested here):
labels: { useHTML: true, formatter: function() { return '<div id="label_'+this.value.replace(/ /g,'') +'">'+this.value+'</div>'; } }
However, after running it, it starts to look like this:
How can I keep the formatting that Highcharts applies while still adding my personal id to each label?

Maybe the fact that you are using div is throwing some highcharts styling off. You could try using span.
Or maybe your id is adding some CSS which isn't playing well with highcharts CSS. To check this you could try temporarily commenting out the CSS associated with your id to see if it works that way.

datatable white-space:nowrap for one specific column

I have a bootstrap datatable with alot of data. One row in particular (Product) will always have a large amount of data. Currently the row expands downwards and takes up alot of space
I am trying to get the Product column to expand to the right instead of down, so that the product column title expands to fit the width of the data. The closes I've gotten so far is by adding this css style:
<style> td { white-space: nowrap; } </style>
Which will do the desired column growth, but for each column
Is there a way to have ONLY the product column get better styling to it expands to the right and grows the column width? Maybe even have two lines of text instead of one for a more compact text display.
https://jsfiddle.net/martinradio/yz46nLr8/61/

You can use td:nth-child(9).
td:nth-child(9){
white-space: nowrap;
}
See the JSFiddle: https://jsfiddle.net/ju4d73po/

For Bootstrap 4 use 'text-nowrap' class
const table = $('#listTable')
.DataTable({
columnDefs: [{
targets: 0,
className: 'text-nowrap'
}]
});

Jquery Datatable - need to center the data first then right align

I am using data-table in my application which contains text and #'s as data and use the following data alignments:
1) Text data - left aligned
2) Header data - center aligned
3) #'s - center the data first then right align
I have achieved the first two alignments by using data-table's default classes 'dt-left' and 'dt-center'. But I am unable achieve the 3rd alignment either by using 'dt-center' and 'dt-right' classes.
Please find the attached screen-cap for the expected and actual alignments.
Expected #'s alignment:
Actual #'s alignment:
I had achieved the expected behavior by simply providing 'padding' for . But I want to know is there any other efficient/default option available in data-table to achieve this?

The following shows the columns.className option being used to center align the text in the final column of a datatable:
$('#myTable').DataTable( {
columnDefs: [
{
targets: -1,
className: 'dt-body-center'
}
]
} );
Please refer : https://datatables.net/manual/styling/classes for more information.

Highcharts column with drilldown results in blurred data label in main chart, except for the drilled down columns

When coding a Column Chart with Drilldown:
The main chart rendered blurred black colored data labels. But when they are clicked, the next columns (the drilled down columns that are opened) are perfect (white color, no blur, very readble).
I found a workaround declaring:
.highcharts-drilldown-data-label TEXT { color: #FFFFFF !important; text-shadow: 0 0 0px white !important; fill: white !important }
Try to remove the selector above and check the result: https://jsfiddle.net/marcelbonnet/pjb5dw9q/1/
Now, is it a bug in highcharts or perhaps some mistake of mine? I even tryed change jQuery version, but no effects.

(I would comment, but I dont have enough points.)
To me it looks like a bug. If you do not include the drilldown.js your fiddle works as expected. I would run with the css.
Note that the fiddle doesn't work in FF unless the TEXT is in lowercase:
.highcharts-drilldown-data-label text {...}
You might want do report the bug at https://github.com/highcharts/highcharts/issues

SOLVED with a hand from highcharts support on github: https://github.com/highcharts/highcharts/issues/5145#issuecomment-200878598
An example here: https://jsfiddle.net/pjb5dw9q/6/
The problem is related to the style , because by default it is underlined and blue to invite to interaction. See api.highcharts.com/highcharts#drilldown.activeDataLabelStyle .
Adding the code below solved it to me.
drilldown: {
activeDataLabelStyle: {
color: 'blue' //style to invite interaction
},

Make jqGrid's cb column wider

I'm using free-jqGrid and jqGrid has the option to place selection checkboxes for you onto the grid. On my grid I have two columns in the beginning which is placed by jqGrid and not backed up by my own data: a record number column 'rn' and the checkbox for record selection 'cb' (multi select in my case).
I feature the jqGrid on a bootstrap website, so when the loadComplete event hits, I add 'from-control' class to a lot of edits, like the per column search boxes and basically every edit I can find on the page. (I also replace every ugly little icon to glyphicons. I manipulate the DOM of the toolbar buttons so they become real buttons, so they look nicer and chardin.js work well for example. And so on and on and on. The end result is much better than the original. BTW, I'm not sure if that's the best practice, I couldn't find a better way to make jqGrid more bootstrappy, but this can be another question).
When you apply form-control class to a checkbox, it bloats up. That's beneficial, because it's much easier to click on it, you don't need to have a magnifier glass (like for the original tiny checkbox). I can nicely resize the columns for all those data columns what I supply data for, but I cannot figure out how to widen the cb column so it can accommodate the bloated up checkbox.
I tried adding a configuration for that column in my colModel:
Both
{
name: 'cb',
width: 38,
align: 'center',
sortable: false,
}
and
{
width: 38,
align: 'center',
sortable: false,
}
failed, I got an error from jqGrid stating that the number of colModels doesn't match the number of supplied data. That's true, because the data behind the cb column is not backed up by me.
I tried in the loadComplete
var $ajaxGrid = $("#ajaxGrid");
$ajaxGrid.jqGrid('setColProp', 'cb', { width: 38 });
That didn't give me an error, but also didn't change anything. Maybe I should put it into another event handler? Which?
Then I tried to go down the rocky road of manipulation:
$("#ajaxGrid_cb").css("width", "38px");
$(".td_cbox").css("width", "38px");
As you see I separately widen the header and the td elements. But this causes the table horizontal scrollbar to appear. Yuck! I tried to tumble deeper into the hacking hole, and make a wider column on the grid narrower to make the scrollbar disappear, but this didn't help:
$("#ajaxGrid_Name").css("width", "435px");
$('td[aria-describedby="ajaxGrid_Name"]').css("width", "435px");
There must be a way. Now it's ugly. Screenshot:
(Another style problem you can also see is for the Combined column I specify align: 'center' in the colModel but it has no effect.)

You can use multiselectWidth to specify the width of the multiselect column:
multiselectWidth: 38
One more alternative: you can change the columns width later using setColWidth which is the part of free jqGrid. I introduced the method originally in the answer as plugin to old jqGrid versions. Thus the following, for example, will work too:
onInitGrid: function () {
$(this).jqGrid("setColWidth", "cb", 38);
}
The onInitGrid callback or jQuery event "jqGridInitGrid" are good place, where you can modify the grid before the data will be loaded.
P.S. I'm working now on including better support of Bootstrap in free jqGrid. Probably you will just need to use guiStyle: "bootstrap" in the next version of jqGrid to make jqGrid be "in Bootstrap style".