score:27
there are two ways of specifying gradients in current version of highcharts. previously you only had the option of using an array with four coordinates like lineargradient: [x1, y1, x2, y2]
. this would make the gradient coordinates apply to pixels and therefor be used for all bars (as in your example).
the new option is to use a configuration object instead:
lineargradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 0
}
the coordinates here are numbers between 0 and 1 which corresponds to each individual bar. so, if you change the array you used to be a config option (and use normalized coordinates) you will get gradients in each bar.
example on jsfiddle
screenshot:
edit: and as a bar chart have the x-axis going from top to bottom you should let x1 be 0 and x2 be 1, instead of changing y1 and y2.
score:3
add setoptions in chart
highcharts.setoptions({
colors: ['#058dc7', '#50b432', '#ed561b', '#dddf00', '#24cbe5', '#64e572', '#ff9655', '#fff263', '#6af9c4']
});
try this in fiddle
Source: stackoverflow.com
Related Query
- Styling bar colors in Highcharts with a gradient issue
- Highcharts cloud issue with data source when duplicating chart
- dealing with highcharts bar chart with really long category names
- Highcharts data series issue with ajax/json and PHP
- Highcharts - Issue with negative values when displaying multiple axes
- Highcharts stacked column bar with line
- Highcharts - Global configuration with common code and unique data & Headings
- creating a bar chart using Highcharts with React - getting an error that rendering div isn't found
- Highcharts bar with non-stacked percent series
- HighCharts query parameters issue with Flask webservice
- Highcharts column + line combination chart with multiple series. Issue aligning line over the column
- Resize issue while gridster.js with highcharts
- HighCharts: How to combine custom colors with gradient
- Adding round corners to Highcharts Bar Chart with stacked bars when value is 0
- Highcharts bar chart with fixed bar widths and gaps
- Splitted bar chart for paired data with highcharts
- Highcharts reloading issue with Backbone.js
- Highcharts zIndex issue with crosshair
- highcharts 5.0.14 issue with textOverflow
- Highcharts bar zoom issue when using transparent series
- Performance issue with Firefox on Highcharts and Highstocks
- Highcharts vertical stacked bar chart with negative values, is it possible?
- Highcharts grouped bar charts with multiple axes
- Highcharts solidgauge with green/yellow/red gradient
- HighCharts - bar chart with indicator
- passing formatting JavaScript code to HighCharts with JSON
- How to create a single series bar graph with Highcharts
- JSON Data Map Issue with HighCharts + Ajax
- Highcharts gantt chart : Task progress indicator need to show a single task for various status like completed,inprogress etc with different colors
- Highcharter bar colors issue
More Query from same tag
- HIghcharts Map from GeoJSON Data Showing Up Too Small
- Generating PDFs when JavaScript is being used
- Displaying percentage inside pie item for highcharts
- HighCharts is undefined because multiple Html pages in Javascript file
- How to distinguish Highcharts background color for if statement
- Changing the contents of Highcharts legend
- Lazy_high_chart: why options.xaxis undefined?
- Append a Jade file to a div in parent Jade file on Button click
- How to put progress in percentage inside the solidguage of highcarts
- Highcharts with reveal.js: Refresh chart with slide?
- Change legend symbol in Column Chart in highcharts
- Highcharts - set maximum range for yAxis but keep axis dynamic within that range
- jQuery Highcharts not working with JSF 2.0
- HIghcharts individual plot point color
- Issue loading JSON in Highstock
- Highcharts: series gaps for "columnrange"
- highmap does not display
- Highcharts dynamically move dataLabel if it doesnt fit
- Set datetime measure unit in Highcharts
- How to hide Series Name in HighCharts Tooltip when using pointFormatter
- Show multiple Y axis stacked one upon the Other in Highchart Line type graph
- External JSON into Highcharts Line Graph - Date Parsing Issue
- How to elegantly plot charts in ASP.NET MVC 3 using Highcharts?
- Highcharts Sankey Colors not working in django
- Highcharts -- exporting, setting dataLabel options
- Highcharts - linear chart hidden in combination of graphs
- Is it possible to remove a pane in highstock/highcharts?
- How to generate dynamic series data for highcharts?
- Posted value is not getting in the where clause with json highcharts-php and mysql
- Trying to get Gridster to call functions like disable but $('.gridster ul').gridster().data('gridster'); not working