score:26
top level config can contain colors
field. it's an array from which series colors will be picked.
here's working piece from my project
var chart;
$(document).ready(function () {
chart = new highcharts.chart({
chart:{
renderto:'perfchart',
type:'line',
marginright:130,
marginbottom:25
},
colors: ['#0000ff', '#0066ff', '#00ccff'],
title:{
text:'historical system performance',
x:-20 //center
},
appearance:
score:3
see the code (and the plot that it renders) below.
the snippet below is a complete script--i.e., either put it in your markup between two script tags or as a stand-along js file with an includes in your markup.
colors
is a chart object so the easiest way is to pass an array of colors (as hex strings):
$(function () {
var chart;
$(document).ready(function() {
chart = new highcharts.chart({
chart: {
renderto: 'container',
type: 'line'
},
colors: ['#562f1e', '#af7f24', '#263249', '#5f7f90', '#d9cdb6'],
title: {
text: false
},
yaxis: {
title: {
text: false
}
},
series: [{
name: 'series i',
data: [17.4, 16.1, 19.45, 24.15, 28.44, 33.15, 37.2, 41.25, 43.3]
},
{
name: 'series ii',
data: [13.19, 17.23, 25.74, 28.5, 33.9, 35.62, 37.0, 36.6, 34.82]
}
]
});
});
})
score:3
the color can be configured as part of the series. try something like this:
series: [
{
name: 'series i',
color: '#ffffff',
data: [17.4, 16.1, 19.45, 24.15, 28.44, 33.15, 37.2, 41.25, 43.3]
}
];
Source: stackoverflow.com
Related Query
- Customizing the colors of individual series in HighCharts
- HighCharts : Is it possible to customize the colors of individual series?
- Highcharts - How to set custom colors for the series
- rCharts: Change the individual point colors of a time series plot (Highcharts)
- How to make the selection of individual series dynamic in highcharts even after setting max and min?
- Use different colors depending on the number of series - Highcharts
- HighCharts Hide Series Name from the Legend
- How can I change the colors of my highcharts piechart?
- Hiding a Highcharts series without using the legend
- How can i hide all the Series in highcharts at a time
- Add a gap between the second and third series in a Highcharts column plot with four series displayed
- Show specific series values in the stack label using highcharts
- Customizing the Stockchart range selector buttons from HighCharts library in GWT (and Javascript in general)
- highcharts link series such that turn one off turns off the other
- How can I delete all of the points from a highcharts series
- Highcharts - Scatter chart with a line connecting the dots in the series
- Sort the series data for every X-Axis in Highcharts
- How do I style the series labels on a Highcharts pie chart?
- How to remove the halo/glow around a marker upon hovering a series in Highcharts
- Highcharts add tooltip that has a small arrow pointing toward the series
- How do I hide a Highcharts series from the chart, but always show it in the tooltip?
- Highcharts Bubble Chart - How to move an individual point's data label (dataLabel) to the front/top
- Gauge Series of Highcharts with React not the Solid Gauge but Gauge Series
- Highcharts show the same yAxis start and end value with multiple data series
- Highcharts - how to create multiple y axis and group the data series
- how to display 2 same highcharts without duplicate the code
- Highcharts heatmap - disabling the legend results in different colors
- Highcharts - Series tooltip doesn't work when plotting lines that zigzag on the x axis
- Is there a way to change the display value in series using highcharts
- change the categories and series in highcharts by select button?
More Query from same tag
- In Highstock, overlapping flags when existing multiple series
- Draw a vertical line when clicking on the series in highcharts.
- How to identify Highcharts datagroup event?
- highcharts-angular not rendering the chart
- Add showLoading() in Highstock
- How to dd shadow to highchart bars
- Finding parent of highcharts button w/ jquery
- Custom field name in ECharts
- How to provide additional arguments to custom symbol renderer in Highcharts?
- Highcharts :: Need to split y-axis from primary body of chart. Can I display this axis separately from the Highchart?
- Visualization library suggestions
- Highcharts Tooltip - Access "z" value in series data array
- Updating basic column high chart
- Parsing data in Highchart
- How to add Modal pop up on nodes of org chart Highcharts
- How can I display different text from a different div on mouse click?
- High chart - Column Range Chart with Time range. How to get tooltip as Start and End time
- MonthPicker in Highcharts Stockchart not changing month
- is there any option to get highchart plotbands only for one xaxis?
- High Charts - chart not loading but doesnt shows any error
- How to conserve the highchart graph locally?
- Creating a live web app
- Highstock : Shared tooltip except for one series
- HighCharts show selected point from chart on Pie Chart
- I am facing image cut issue after upgrade Highchart version from 6.0.7 to 8.0.4
- How to trigger a legend click in HighCharts with jQuery?
- Changing the color of a background with highcharts.js
- Ember Highcharts Component throwing odd error
- How to add synchronized-charts in drilldown?
- Hide the charts