Picture
Hi, I´ve come accross this picture. I am using highcharts.com and already have a boxplot rendered, and I would like to add 3 additional lines with some text for each individual boxplot. Later I wanna render gridlines so it will look like a table, I have drawn my idea very quickly in paint, how it should look in the end. Any ideas how to achieve that with highcharts? Thanks
Picture with gridlines
To acheive the wanted result, you can use grouped-categories module: https://github.com/blacklabel/grouped_categories
xAxis: {
categories: [{
name: "Fruit",
categories: ["Apple", "Banana", "Orange"]
}, {
name: "Vegetable",
categories: ["Carrot", "Potato", "Tomato"]
}, {
name: "Fish",
categories: ["Cod", "Salmon", "Tuna"]
}]
}
Live demo: http://jsfiddle.net/BlackLabel/aest25yg/
Related
I'm importing a csv file using Highcharts cvsURL for a line chart. I'm using styledMode and I defined the default colors. Highcharts is using my stylesheet. Is there an easy way to tell each series which color to use?
I have lots of lines, so highcharts cycles through its 10 default colors. I need one of the colors to only be assigned to 2 specific series though.
Here is my code so far:
Highcharts.chart('container', {
chart: {
type: 'line',
styledMode: true //this totally separates the design from the svg.
},
data: {
itemDelimiter: ',',
csvURL: 'http://deq.at.utah.gov/wp-content/themes/deq/parts/charts/Ozone-4th-Highest-8hr-Front.csv'
},
title: {
text: 'Ozone 4th Highest 8-hr Concentration Wasatch Front'
},
yAxis: {
title: {
text: '(Ozone PPM)'
}
}
});
I think the API said something about assigning classes to a series. Maybe that would work because I could make custom CSS for only those series, but I can't see how to do that using csvURL.
You can define color or className for series in this way:
data: {
csvURL: '...'
},
series: [{
color: '#00c735'
}, {
color: '#c4392d'
}]
Live demo: https://jsfiddle.net/BlackLabel/kj9udgat/1/
API Reference:
https://api.highcharts.com/highcharts/series.line.className
https://api.highcharts.com/highcharts/series.line.color
I have a series which contain various data columns, each represented as columns in a gantt chart. There are many columns represented by 5 different colors that I would like to show up on the a legend.
legendItems = [ {name: "type1", color1: "#0082c8"},
{name: "type2", color1: "#f58231"},
{name: "type3", color1: "#911eb4"},
{name: "type4", color1: "#911eb4"},
{name: "type5", color1: "#911eb4"}
]
Is it possible to create a legend with the 5 colors and what they represent based on legendItems, without having to depend on the number of series?
If it is possible, how can I do this?
You can create custom legend buttons, like in this example: http://jsfiddle.net/BlackLabel/pvhud6zb/
Also Highcharts provide linkedTo option for series, which allow you to combine more than one series in one legend item:
Highcharts.chart('container', {
series: [{
data: [2,2,2]
},{
data: [1,2,3],
id: 'secondSeries'
},{
data: [3,2,1],
linkedTo: 'secondSeries'
}]
});
Live demo: http://jsfiddle.net/BlackLabel/pfraLzgs/
API: https://api.highcharts.com/highcharts/series.line.linkedTo
Do anyone know which setting in hightcharts can change the width that marked with red arrow as example?
Please take a look at the image below
I want to set the width of the red arrow as example
You are using categories, so axis is divided evenly between all existing categories. In other words, you can simply remove unnecessary categories, for example: http://jsfiddle.net/mwqto4n6/
$('#container').highcharts({
xAxis: {
categories: ["2016", "2025"]
},
series: [{
type: 'column',
data: [200, 120]
}]
});
Similar to this question: Is it possible in highcharts to have 2 charts, sharing the same x-axis, but next to one another?
Is it possible to have two xaxis, but instead of side-by-side or on top of each other, to have them alternate. i.e. first column is from axis0, second is from axis1
Yes, it is. Since you did not provide any code on what you had tried here is a basic example. Do something like:
yAxis: [{
min: 0,
title: {
text: 'Rainfall (mm)'
}
},{
min: 0,
title: {
text: 'Europe Site Rainfall (mm)'
}
}],
As far as alternating column to whatever axis you can handle that by how you add the series and what axis you assign them to.
I have two datasets (red, blue) that have data starting in 9/11 and one (green) with data starting in 2/13. The green one is starting in the same location as the others, but it should start in 2/13. How can I tell this dataset to do that? I'd rather not use 0's if there is a way around it.
You can put JavaScript's null value if you don't have any value. My English may not be that much good to explain but my example is clear. Also you can look at that page: http://www.highcharts.com/demo/area-missing/gray
<script>
$(function () {
$('.graph').highcharts({
chart: { type: 'line'},
plotOptions: { series: { connectNulls: true }},
xAxis: {categories: [2012,2011,2010,2009] },
yAxis: {title: { text: 'Example Fruit Consumption'}},
series: [
{ name:'Apple', data:[null,null,20000,41000]},
{ name:'Orange', data:[29458,29000,26892,23256]}
]
});
});
</script>
You can define pointStart() http://api.highcharts.com/highcharts#plotOptions.series.pointStart for serie.