score:2
You can color parts of the graph if you point them in CSS. http://jsfiddle.net/0jsa3fw6/
JS:
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C',
enabled: false
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: "Cost Estimate Today",
cls: 'costToday',
data: [1, 2, 3],
pointPadding: -0.05
}, {
name: "Cost Estimate Yesterday",
cls: 'costYesterday',
data: [10, 5, 8],
pointPadding: -0.05,
dashStyle: 'dash'
}]
});
});
CSS:
g.highcharts-series:nth-child(3) > path:first-child {
stroke: #e98300 !important;
}
g.highcharts-series:nth-child(1) > path:first-child {
stroke: #7ab800 !important;
}
Source: stackoverflow.com
Related Query
- CSS Style not getting applied to a series in Highchart
- highchart Customclass css not applied to tooltip for dumbbell series
- Highchart (Column Chart) : Few data labels are not appearing for a series
- HighChart Title text implemented HTML Style is not applying in exporting files
- Highchart export not applying style(font size) on series data labels
- TypeError: p is not a function while calling map function in angular 4 for fetching series for bellcurve highchart
- Highchart is not getting populated using external json data
- Highchart not adding new series or removing old series
- One series name in higcharts not getting populated even though json send the correct information
- Setting additional data to Highchart series via <%= #{} %> works for integers but not Strings
- Highchart plugin not accepting array for series data?
- Highchart not able to use javascript variables(arrays) in series data
- Highchart stacked area series is not showing correctly
- data not getting displayed/plotted in highchart
- Highchart Pie Chart not working properly with series
- Column based Highchart drilldown series assign color code to each column
- x-axis, y-axis lines does not appear, when I include 3D chart library of HighChart in my code
- Highchart Series are displayed one after another and not parallel
- Highchart tooltip does not match series colour - Solid Gauge Chart
- How to style text annotation using CSS in highchart
- Highchart dates do not work for some data series
- Images/Icons in datalabel not getting exported - highchart treemap
- why my highchart code is not working?
- Datapoints in Xrange highchart are not uniformly getting aligned to the center
- How to remove Series name on bottom and we are not getting bar value on top of each bar and also each bar description is aligned cross in Columnchart
- Hichcharts - Custom legend css not getting displayed in Print Chart download functionality
- Highchart display of more than 1 series is not showing
- Spline chart series not getting printed on export as image
- Highchart series style on button click
- Highchart map does not support IRS country code
More Query from same tag
- Need to have a clear all button in for legend items in Highchart react
- how do you change the color of cells in highcharts heatmap?
- How I can stick together the lines on the Highcharts timeline chart?
- Disabling inactive state in Highcharts styled mode
- Tooltip.followPointer does not work in highcharts 3
- Highcharts highstock tooltip series order
- How to handle mouse events on axis labels in highcharts
- Wrong date display in Highcharts graph
- Uncaught Error: [$injector:modulerr] using Angular JS and highcharts-ng
- how do you create highstock multi line chart in highcharts
- Highmaps logo string rendering invalid copyright character
- Is It possible to plot a water fall chart as shown in the below image?
- Implementing High charts with PHP and Mysql
- Highcharts - how to set line height in multiline annotations labels in styled mode
- highcharter - where are the already downloaded maps for hcmap() stored on a (shiny) server?
- compress x axis in high chart
- Laravel 8 Inertia HighCharts not being imported in the app.js
- Highcharts series zone not working with UTC date value in x axis
- updating the array that is being passed to highcharts in meteor app
- Highcharts - Reset zoom in synchronised charts
- How does 'min' 'max' works in Highcharts? I can't get the scrollbar to work
- Highcharts issue when start index is less than 0
- Object structure changed internally
- Series markers disable on lines and enable on legend in Highchart
- How to add and resize image in context button of highcharts
- Highcharts how to remove headers from tooltip
- Highcharts shows data but can't display chart
- Printing html page elements
- Where to find charts plug-in like this?
- Highcharts show x-axis labels as weekly intervals