We Keep Coding

High chart legend colors in square form

I need legend colors in square form but its square boxes also appearing on graph which I don't need.
It is also appearing on the graph which I don't need.

You can add the below plugin to use legend symbol drawing method from pie series and set legend.symbolRadius to 0.
(function(H) {
H.seriesTypes.line.prototype.drawLegendSymbol = H.seriesTypes.pie.prototype.drawLegendSymbol;
}(Highcharts));
Highcharts.chart('container', {
legend: {
symbolRadius: 0
},
series: [...]
});
Live demo: http://jsfiddle.net/BlackLabel/0Lf2qupm/
API Reference: https://api.highcharts.com/highcharts/legend.symbolRadius
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

How to highlight cells and yaxis ticks on highcharts heatmap hover

I have a large heatmap, and because it's so large, I'm trying to highlight the cell when someone mouses over it, and I'd also like to highlight the y-axis tick as a time reference because of the large width of the chart. I've seen some examples of this, but my heatmap is not responding with hover effects.
I've used this example to highlight the cells red, but it's not working. http://jsfiddle.net/937twae7/ I've also researched this method for highlighting tick values, but it's probably not working for similar reasons. https://jsfiddle.net/sjapdya6/1/
In the "series" section of code, I've done this:
...
states: {
hover: {
color: 'red'
}
}
...
Here's my chart: https://jsfiddle.net/civilsurfer/Lhysx2vg/1/
Nothing happens as I hover on the cells.
Thanks for any assistance.

You used the boost module which increases performance, but causes some limitations - for example, the inability to change color in states.
To highlight an axis label you need to adjust the findTick function:
function findTick(point, ticks) {
for (var tickValue in ticks) {
if (tickValue == point.y) {
return ticks[tickValue]
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/agcper18/
Docs: https://www.highcharts.com/docs/advanced-chart-features/boost-module

Angular. Highcharts. Column Chart. Positioning of Columns on X-Axis

I have a highchart made with Angular.JS. Each column has its own stack level and is essentially managing its own group of data
My series is an array of objects that looks like this:
[{
name: seriesGroup.name,
data: [number],
xAxis: xAxisLevel,
stack: xAxisLevel
}]
The problem I'm having is that highcharts seems to automatically add some offset styling that moves each column out of position. Ideally I want all columns centered correctly like the one for Currency. See image above where you can see the x-positioning that's getting added to the rect tag.
Is there any parameter I can set to highcharts to disable this effect? I have not been able to find anything of the sort in the API docs.
Please take a look at the fiddle for a simplified version:
https://jsfiddle.net/nz0v8w5u/

You can make it setting appropriate plotOptions.series.groupPadding property. In your case 0.5 seems working as expected. Check the code and demo posted below.
Why do you add five xAxis instead of using just one? With one axis highcharts will automatically position columns properly and the code is much easier. Check this example: https://www.highcharts.com/demo/column-stacked
Code:
plotOptions: {
column: {
minPointLength: 1,
groupPadding: 0.5,
stacking: "normal",
dataLabels: {
enabled: false
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/7pL8mj1s/
API reference:
https://api.highcharts.com/highcharts/series.column.groupPadding

ECharts: how to show all axis labels?

Echarts seems to have a nice feature that automatically chooses which labels to display depending on the space provided. However, this algorithm seems to be bit too aggressive at times and does not take into account text rotate. I've gone through the chart options and there doesn't appear to be a way to disable this feature. I'm hoping it's just something I've overlooked. Help appreciated.

axisLabel (under yAxis or xAxis) has an option interval. Set this to 0 and labels will be displayed.

You can try this to force the label of the x-axis,
xAxis: {
type: "category",
data: data[0],
axisLabel: {
interval: 0,
rotate: 30 //If the label names are too long you can manage this by rotating the label.
}
//If your label is in the `y-axis` simply change the code `xAxis` to `yAxis`.
If your axis label is not showing in a chart frame (mean ECharts label's length is too long), Try this,
grid: { containLabel: true },

2 ways to solve long label text
Using rotate option xAxis : { axisLabel: {
rotate: 45
} }
Using formatter and introducing '/n' to break the text

just for the record:
If your categories have a fixed width, you can also set it up like this, in order to show all labels:
axisLabel: {
width: 100, //fixed number of pixels
overflow: 'truncate', // or 'break' to continue in a new line
interval: 0,
},

FLOT plot chart legend CSS being overwritten

I am experimenting with the FLOT plot tool and having some problem with the legend. Specifically, the CSS for the legend must be being overwritten somewhere in my code because the legend is looking like this:
When I try to pass legend options to the plot, they do not appear. What do I need to do fix this CSS problem? Thanks.
Here is some of the code I am working with:
var options = {
series: {
lines: { show: true },
points: { show: true },
legend: {
margin: 5
}
}
};
$.plot("#flotcontainer", [ json ], options);

The margin option from flot specifies the distance to the plot edge which seems about right at 5 pixels. Try to set the position option too (see the documentation for more information).