score:1
Accepted answer
Referring to comments you can set a specific color to a single point by adding a color property programmatically to its object like that:
series: [{
data: [
["Qualcom", 17],
{
name: "The ram",
y: 12,
color: 'red'
},
["Aoperty", 8],
["Ob.", 8],
["Sugh", 8]
],
color: '#2ecc71'
}]
API reference:
Demo:
If you want to add a specific color to a point when a condition is matched you can loop through each series point in chart load event and update a matched point:
chart: {
type: 'column',
events: {
load: function() {
var chart = this,
series = chart.series[0];
series.points.forEach(function(point) {
if (point.name === 'The ram') {
point.update({
color: 'red'
})
}
});
}
}
}
API reference:
- https://api.highcharts.com/highcharts/chart.events.load
- https://api.highcharts.com/class-reference/Highcharts.Point#update
Demo:
score:0
You need to set colorByPoint :true
to use different colors like that
series: [{
name: 'Stats',
data: [
[
"Qualcom",
17
],
[
"The ram",
12
],
[
"Aoperty",
8
],
[
"Ob.",
8
],
[
"Sugh",
8
]
],
colorByPoint: true,
pointWidth: 25,
}]
Source: stackoverflow.com
Related Query
- How can I get every bar in different colour using Highchart?
- How can I prepare a Group Stacked Bar Chart in Highcharts using multiple and different types of data?
- Can color of data label be different inside and outside of the bar in Highchart
- In highcharts's stacked bar chart, how can I remove the white space between different
- How can I prevent my HighChart bar chart from being inverted?
- Vue js + HighChart - how can I make a synchronous axios call before the component get rendered?
- How can I get a chart only with legends using highcharts
- How can I populate my highchart using Ajax.
- How can I convert datetime stamp in jQuery of a Highchart to get the correct format in json?
- How can I get inner slice when clicking on an outer slice in a HighChart donut chart?
- How Can we display blocked area for particular timeline in horizontal bar in gantt highchart
- how to show data json to 2 different highchart bar
- How can I group different series by different units using rangeSelector?
- How can I get arrows at the end of x-axis and y-axis using highcharts.js?
- How to get id for every data point in highchart
- Highchart multiple axes - How can I add different starting coordinates?
- How to create a drilleable bar graph in jsp page using open source charts API
- How can I get proper object through loop using javascript for Bubble Charts of Highcharts
- How can i draw a high chart with two labels in x coordinate using highchart
- How can i set the json encode result to the highchart series data using getJSON
- How to set different colors for bars based on value in Highchart bar chart?
- How to set different bar width in the same series Highchart
- How to get different colors for every column in a stacked column chart
- how to avail bg color for every bar in highchart
- How to remove space between highChart bar graph between two different category
- Highchart spline Cut Off when reach to maximum scale value. How can it fixed?. I have attached may sample code on body
- How can I put text within horizontal bar chart data points using Highcharts as well as adding text underneath each data point? Example below:
- How can I set different distance of each points in highchart timeline?
- Can I get input field object from range selector using java? Highchart
- How to show bar of graph in different colour when it reaches threshold level in high charts in JS?
More Query from same tag
- Highcharts pie chart plotting different values
- Reduce space between legend text and icon in Highchart
- How draw a stacked column chart with type datetime
- export csv from highcharts
- Control spacing and height between bars in Highcharts.js bar chart
- highcharts mouse over/out events fired in wrong timing
- How to remove cirlce,line,square symbol from highchart
- Highcharts, 5 small charts some randomly not drawing
- Highcharts How to get decimal point values on y-axis with big numbers
- HighCharts Export Server not rendering series marker symbols consistently
- Highcharts gantt chart : Task progress indicator need to show a single task for various status like completed,inprogress etc with different colors
- HighCharts Dynamically add flags
- Highcharts - Multiple pie charts from json
- controlling the resolution (dpi) of an exported JPG from highcharts exporting-server
- In Highcharts, how to set width of plot bands on y-axis in column chart?
- Multiple y-axes for column graph categories in highcharts
- Reusing highchart chart many times on the same page by changing parse string
- Highcharts parsed drilldown not showing on page but does in console
- How to load a Highcharts options object, including a callback property, with getJSON
- Highcharts: Implement a second y-axis related to the first y-axis
- High Charts - Split color of bar chart
- Highcharts passing variable to tooltip
- Can we overlap more than one charts by using HighCharts
- How do you remove an annotation from Highcharts?
- Javascript syntax when setting a value
- Highcharts - Scatter chart with a line connecting the dots in the series
- Is it better to update a Highcharts chart or destroy and recreate it?
- How can I specify custom end markers in a scatter series with Highcharts 9?
- Highcharts - Changing chart type
- How to use a react component as the label in Highcharts?