I'm using highcharts, and would like to implement the [following graph]
I'm using 'categories' property for the dates, and the 'data' array for the values.
Unless I remove the ''categories' field, I have
a redundant padding
What I have already tried, and didn't work?
Set 'maxPadding : 0' for xAxis
Set 'showFirstLabel : false"
Set 'step: 5'
How can I define this '0' padding?
You need to use following option:
series: {
pointPlacement: 'on'
}
Demo:
https://jsfiddle.net/BlackLabel/n8gd4qy6/
API Reference:
https://api.highcharts.com/highcharts/series.line.pointPlacement
Related
https://jsfiddle.net/z6rvjem5/
series.data would show an array of objects in the tooltip, but series.data[0] just gives undefined. How do I access the actual data and show in pointformatter (for example: I want to show the difference between every y value and the previous one without setting
compare: 'value')
The pointFormat doesn't support more than one nesting level. Use pointFormatter function which has more flexibility.
pointFormatter: function(){
var point = this,
series = point.series;
return `${series.name}: <b>${point.y}</b><br/>${series.data[0].y}`
}
Live demo: https://jsfiddle.net/BlackLabel/1ets3xn2/
API Reference:
https://api.highcharts.com/highcharts/tooltip.pointFormat
https://api.highcharts.com/highcharts/tooltip.pointFormatter
I have a chart that works very well when using the data module with Google spreadsheets. However I need to stop using Google sheets and use CSV on my own server instead. Some of my charts are working, but some aren't. Here's one that is not working. It uses the second column to set the point color, but it's not recognizing it. Any idea what might be wrong here? I edited some of the csv entries to try to make it work, but it's not working much:
http://jsfiddle.net/jmunger/cf6L4bmk/20/
var chart = Highcharts.chart('gfx', {
chart: {
type: 'bar',
},
data: {
csv: document.getElementById('csv').innerHTML,
itemDelimiter: ',',
seriesMapping: [{
color: 2,
label: 3
}]
}
});
console.log(chart);
That problem seems to be a bug in a data module, so I reported it here: https://github.com/highcharts/highcharts/issues/13283
As a workround you can use other color formats:
0;1;blue
1;2;rgb(155,155,55)
2;3;red
Live demo: http://jsfiddle.net/BlackLabel/0gjbn4m6/1/
I'm able to create a highcharts table of numerical data. However, I would like to create a table where it displays text 'as well as', being able to export the table as a .png, .jpg, etc
Here is my jsfiddle of the table:
`https://jsfiddle.net/eblanks/vm813fyo/36/`
You can use keys option:
plotOptions: {
series: {
keys: ['text'],
...
}
},
Live demo: https://jsfiddle.net/BlackLabel/vx67yLfw/
API Reference: https://api.highcharts.com/highcharts/series.line.keys
I have a unsort data (on x-axis) and using Highcharts to display the graph. I knew the x-axis must sort to show the tooltip as the Highcharts document wrote. But my data could not be sorted by some reasons, so could anyone meet this problem before, please give any idea/solution to show the tooltip without sort x-axis data. If I sort, my data will be wrong.
My js:
var data = [
[5.875, -20],
[8.1875, -30],
[8.875, -40],
[9.5, -50],
[10.125, -60],
[10.5, -70],
[10.875, -80],
[11.375, -90],
[11.6875, -100],
[11.875, -110],
[12.0625, -120],
[12.625, -130],
[12.4375, -140],
[12.625, -150],
[12.5, -160],
[12.4375, -170],
[12.4375, -180],
[12.375, -190],
[12.25, -200],
[12.1875, -210],
[11.9375, -220],
[11.625, -230],
[11.5, -240],
[11.125, -250],
[10.75, -260],
[10.625, -270]
];
$('#container').highcharts({
series: [{
data: data
}]
});
Or please check here http://jsfiddle.net/vuong/jedLowyv/4/
Thank you so much and have a nice day.
You have two options:
sort your data: http://jsfiddle.net/jedLowyv/5/
use scatter series with lineWidth: http://jsfiddle.net/jedLowyv/6/ (not: tooltip will show up only when hover one of markers directly)
I'm seeing this error when I create a line chart with a single y-axis.
Uncaught TypeError: Cannot read property 'series' of undefined highcharts.3.0.1.js:147
It seems that the series is a bit displaced to the left. The leftmost tool tip is hanging off the chart where the y-axis names are showing. All the tooltips are off a bit and if I mouse all the way to the right of the chart I see this error over and over in the console.
Interestingly, if I zoom in and then hit the 'reset-zoom' the chart renders properly and the problem goes away.
unfortunately, creating a fiddle will be hard as I build my config options on the fly. I am using addSeries to add my series to an empty chart once it has been displayed.
Thanks in advance for any help or tips.
-Dale
In general, without code it is really hard to find issue, just copy your 'options on the fly' which reproduce issue, please.
However, most probably you are trying to add series for axis, which doesn't exists. For example:
yAxis: { },
series: [{ yAxis: 1 }] <-- obviously there is only one yAxis
export class xyzComponent implements OnInit {
highcharts = Highcharts;
chart;
chartCallback;
title = 'myHighchart';
chartConstructor = "chart";
chartOptions: {};
ngOnInit() {
this.chartOptions = {
chart: {
type: "spline"
},
title: {
text: 'Average Vegetation and Soil Moisture Index'
},
}
}
}
it's for Angualar