As the title states, highcharts is only loading the title and subtitle, yet none of the subsequent chart information or it's relevant theme. Hitting my head against a wall trying to get this to work. Really hoping someone else here has had this problem.
jsfidizzle
The first half of the fiddle is the highcharts theme. All the logic starts kicking off at #transitfunding
Very simple fix... you need to move your series data outside of your plotOptions: like so:
plotOptions: {
column: {
stacking: 'normal'
},
},
series: [{
name: 'Other',
data: [0, 0, -5400000, 1, 1, 0, 3, 0, 8016805, -8435419, -28900000]
}, {
name: 'Gas Tax',
data: [119221, 627705, 234646, 6685080, 1341871, 1990937, 3187208, 6911715, 10002605, -14282137, -10555715 ]
}]
A working fiddle can be seen here.
you have misplace the series section.
series(that contains data) is the sibling of plotOptions not its child.
so it should be like
plotOptions: {
column: {
stacking: 'normal'
},
},
series: [{
name: 'Other',
data: [0, 0, -5400000, 1, 1, 0, 3, 0, 8016805, -8435419, -28900000]
}, {
name: 'Gas Tax',
data: [119221, 627705, 234646, 6685080, 1341871, 1990937, 3187208, 6911715, 10002605, -14282137, -10555715 ]
}]
I've updated your js fiddle here
Related
I have attached the screenshot to show the dash line in left side of the chart. It would be helpful if we can achieve the functionality and I tried to increase the width of the border, it is visible slightly. Do you have any proper approach to achieve this?
Code Snippet :
Highcharts.chart('container', {
chart: {
type: 'bar',
charWidth: 520,
chartHeight:300,
margin: [70,0,0,0]
},
xAxis: {
categories: ['Jan'],
visible: false
},
yAxis: {
min: 0,
visible: false
},
plotOptions: {
series:{
stacking:'normal'
},
dataLabels: {
enabled : false,
}
},
series: [{
name: 'John',
data: [{
y: 15
}]
}, {
name: 'Jane',
data: [{
y: 22
}]
}, {
name: 'Joe',
data: [{
y: 33,
}]
}, {
stacking: false,
data: [55],
grouping: false,
dashStyle:'ShortDash',
color: 'transparent',
borderWidth: 2,
borderColor: 'red',
}]
});
Thanks for the response
[![enter image description here][2]][2]
The left side of the bar is connected to the xAxis, which makes the left border less visible. There are some possible solutions to this issue.
You can set the minimum value of the xAxis to -0.1 and set startOnTick property to false. Then the left border is visible (it's not directly connected to the axis).
Demo:
https://jsfiddle.net/BlackLabel/pqy84hvs/
API references:
https://api.highcharts.com/highcharts/xAxis.startOnTick
https://api.highcharts.com/highcharts/xAxis.min
yAxis: {
min: -0.1,
visible: false,
startOnTick: false
}
You can set the borderWidth property to 3. Then the border is visible.
Demo:
https://jsfiddle.net/BlackLabel/01m6p47f/
API references:
https://api.highcharts.com/highcharts/series.bar.borderWidth
{
name: 'Joe',
borderWidth: 3,
borderColor: 'red',
data: [{
y: 33,
}]
}
You can also use SVG Renderer and render the border yourself.
Docs:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Example demo of using SVG Renderer:
https://jsfiddle.net/BlackLabel/2koczuq0/
I'm trying to implement a chart with different series but each series will have a value for different categories independently.
What I want to have:
What I have today:
With the following code:
document.addEventListener('DOMContentLoaded', function () {
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['a1', 't1', 't2', 'l1', 'l2', 'p1']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'a',
data: [267]
},{
name: 't',
data: [0, 21, 400]
},{
name: 'l',
data: [0, 0, 0, 600, 242]
},{
name: 'p',
data: [0, 0, 0, 0, 0, 1000]
}],
});
});
There is free space between bars because series has 0 as values for some category.
I just want to have a "nice" chart with all columns one by one.
Maybe, it's a different way to configure series and categories...
Disable grouping:
plotOptions: {
series: {
grouping: false
}
}
Live demo: http://jsfiddle.net/BlackLabel/x6758dcq/
API Reference: https://api.highcharts.com/highcharts/plotOptions.column.grouping
I'm using a stacked percentage bar chart in Highcharts. (This jsfiddle is similar to our chart, derived from an example on the Highcharts site.)
What I'd like to do is add another set of "category" labels on the right side of the chart. Where the left side has labels for each bar, I'd like to show an average on the right. (Calculating this average and putting it in the Highcharts configuration data is done on the server side; in the fiddle I've just hard-coded some dummy values.)
I've tried using multiple x-axis configurations, with the averages categories marked opposite: true to put them on the right side. I can see that adding this is changing the chart, especially if I don't put them on opposite, but the labels don't actually show in any configuration I've tried. Is this possible? If so, what do I need to do that I'm not yet doing?
This is the configuration in the jsFiddle example:
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: [{
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
}, {
title: 'Avg.',
categories: [3.0, 3.3, 3.6, 2.6, 3.0],
opposite: true
}],
yAxis: {
min: 0,
title: {
text: 'Percent fruit consumption'
}
},
plotOptions: {
series: {
stacking: 'percent'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
You have the correct axis set up, but currently the chart doesn't know what to do with the second axis.
Highcharts requires that an axis has either a data series attached to it, or that it is linked to another axis that does, in order to display it.
If you add a linkedTo property, it will work as required:
xAxis: [{
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
}, {
linkedTo: 0, // <-- now the chart will show it, as long as axis 0 is able to be shown
title: 'Avg.',
categories: [3.0, 3.3, 3.6, 2.6, 3.0],
opposite: true
}]
Updated fiddle:
http://jsfiddle.net/jlbriggs/z4zkm8v5/2/
I want to add yAxis dynamically.
chart.addAxis({
id: serie.options.id,
title: {
text: serie.name
},
lineWidth: 2,
lineColor: serie.color,
opposite: false,
});
the code above, adds only line. I need to add measure too. How can i add specific measure for a serie?
For new axis to show measure (AKA scale and labels) you need to set this axis as an yAxis for a series or link this new axis to an existing one, that is showing labels.
$(function() {
$('#container').highcharts({
series: [{
data: [1, 2, 3, 4, 5, 6, 7]
}]
}, function(chart) {
chart.addAxis({
id: 'serie.options.id',
title: {
text: 'serie.name'
},
lineWidth: 2,
//lineColor: serie.color,
opposite: false,
//linkedTo: 0
});
chart.addSeries({
data: [42,2,4,0],
yAxis: 1
});
});
});
Example with:
linkedTo: http://jsfiddle.net/u90dLbc6/1/
assigned series: http://jsfiddle.net/u90dLbc6/0/
I'm trying to tweak a Highcharts scatter plot with this date series
series: [{
data: [[1,2],[2,5]]
}]
so that i can put a name on each point, I want to show the name in the tooltip.
The API doc says an object of named values can be defined like this
series: [{
data: [{
name: 'Point 1',
x: 1,
y: 2
}, {
name: 'Point 2',
x: 2,
y: 5
}]
}]
but it seems the x and y values are not picked up. See my jsfiddle example.
This answer works for Highcharts 4.1.9.
Took me a long time to figure out hence I want to pass it on in case someone is looking for this as well.
Your mileage may vary for other versions.
plotOptions: {
scatter: {
dataLabels: {
format: "{point.name}",
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Projects',
data: [{"name":"Point 1", "x":1,"y":2}, {"name":"Point 2", "x":4,"y":5}]
}]
What are the key points?
Ensure that the scatter.dataLabels is enabled and the format is {point.name}
Ensure that the data is in the format of {"name":"Point 1", "x":1,"y":2}
As mentioned in this comment, what works for me in Highcharts 5.0.6 is:
{
type: 'scatter',
tooltip: { headerFormat: '<strong>{point.key}</strong><br>' },
data: [{ x: 0, y: 1, name: 'Whatever' }, ...]
}
As stated in the documentation, the name field is the name of the point as shown in the legend, tooltip, dataLabel, and so on. I updated your fiddle to include the highcharts library, and I am seeing this behaviour (i.e. if I hover over a point, its label is displayed).
If you want the x-axis labels set correctly, you need to ensure that the xAxis section of your chart configuration does not have a categories key.
You could also show names in the legend section. Updated the selected answer above here
series: [{
name: 'Point 1',
data: [[3, 3]]
}, {
name: 'Point 2',
data: [[4, 8]]
}, {
name: 'Point 3',
data: [[9, 15]]
}]
This is a new feature in HighCharts 3.0. You have to define the xAxis type to 'Category' and give the name of the point in the data if you want it to appear on the xAxis:
xAxis: {
//categories: ['Green', 'Pink'],
type: 'category'
},
...
data: [{
name: 'Green',
x: 1,
y: 2
}, {
name: 'Pink',
x: 2,
y: 5
}]
See your jsFiddle code updated :here.
Note that I have added the tooltip formating feature to show that point.x has no more meaning in this context, only point.name remains relevant. Also, you cannot have two points with different 'name' at the same x position.
I struggled with this issue and after finding the solution in the documentation I must say the behavior as designed feels a bit unexpected.
Per the docs (here: https://api.highcharts.com/highcharts/plotOptions.scatter.tooltip), the tooltip does not show all fields you can add to a data point, but rather
Defaults to x: <b>{point.x}</b><br/>y: <b>{point.y}</b><br/>.
To show the data point name (and any other fields you want to), simply change the HTML rendered by the tooltip. For example, you can display the point name and coordinates in the tooltip while removing the series name as follows:
chart: {
type: "scatter",
}
tooltip: {
headerFormat: '',
pointFormat: 'Name: <b>{point.name}</b><br/>Load time: <b>{point.y}</b><br/>Requests: <b>{point.x}</b>',
},