I have a code that generates a google column chart but want to fix 3 things:
Show annotation on top of each stack.
Remove the scales generated on the right side of the graph shown in the image.
There are only three legend colors but it display nine colors. Just display colors of Actual Current, Actual Saving and Actual Time.
Thanks in advance.
Output image
<script type="text/javascript">
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
isStacked: true,
theme: 'material',
width: 800,
height: 480,
annotations: {
style: 'line',
textStyle: {
bold: true,
color: "#000",
fontSize: 18,
auraColor: 'transparent'
},
alwaysOutside: true,
stem:{
color: 'transparent',
},
},
legend: {
position: 'bottom',
textStyle: {
bold: true,
color: "#000",
fontSize: 18,
auraColor: 'transparent'
}
},
//styles: ['color: #ee8800;opacity: 0.2;', 'color: #dd7790;opacity: 0.2;', 'color: #ff9900;opacity: 0.2;'],
// colors: ['#FF00FF', '#d2691e', '#a9a9a9'],
fillOpacity: 0.7,
bar: {
width: 28
},
vAxis: {
textPosition: 'none'
},
series: {
0: {//['#FF00FF', '#d2691e', '#a9a9a9']
targetAxisIndex: 0,
color: '#FF00FF',
annotations: {
// style: 'line',
alwaysOutside: true,
stem: {
//color: "transparent",
length: 15
},
textStyle: {
bold: true,
color: "#000",
fontSize: 18,
auraColor: 'transparent'
}
}
},
1: {
targetAxisIndex: 0,
color: '#d2691e'
},
2: {
targetAxisIndex: 0,
color: '#a9a9a9',
},
3: {
targetAxisIndex: 1,
color: '#FF00FF'
},
4: {
targetAxisIndex: 1,
color: '#d2691e'
},
5: {
targetAxisIndex: 1,
color: '#a9a9a9'
},
6: {
targetAxisIndex: 2,
color: '#FF00FF'
},
7: {
targetAxisIndex: 2,
color: '#d2691e'
},
8: {
targetAxisIndex: 2,
color: '#a9a9a9'
}
},
theme: 'material'
};
var data = new google.visualization.DataTable();
data.addColumn('string', 'Quarter');
data.addColumn('number', 'ActualCurrent');
data.addColumn('number', 'ActualSaving');
data.addColumn('number', 'ActualTime');
data.addColumn('number', 'PlanCurrent');
data.addColumn('number', 'PlanSaving');
data.addColumn('number', 'PlanTime');
data.addColumn('number', 'StategyCurrent');
data.addColumn('number', 'StrategySaving');
data.addColumn({ type: 'string', role: 'annotation' });
data.addColumn('number', 'StrategyTime');
data.addColumn({ type: 'string', role: 'annotation' });
data.addRows([
['2001', 9866, 333, 721, 163, 986, 333, 263, 386,'386', 733,'733'],
['2002', 1633, 231, 539, 125, 986, 333, 463, 186,'186', 253,'253'],
['2003', 1255, 819, 123, 197, 986, 333, 893, 586,'586', 933,'933'],
['2004', 1977, 536, 613, 231, 986, 333, 463, 186,'186', 833,'833']
]);
var container = document.getElementById('chart_div');
var chart = new google.charts.Bar(container);
// move annotations
google.visualization.events.addListener(chart, 'ready', function () {
var chartLayout = chart.getChartLayoutInterface();
var yLocation = chartLayout.getYLocation(0) + options.annotations.textStyle.fontSize;
var observer = new MutationObserver(function () {
Array.prototype.forEach.call(container.getElementsByTagName('text'), function (annotation) {
if ((annotation.getAttribute('text-anchor') === 'middle') &&
(parseInt(annotation.getAttribute('font-size')) === options.annotations.textStyle.fontSize)) {
var rotate = 'rotate(270 ' + annotation.getAttribute('x') + ' ' + yLocation + ')';
annotation.setAttribute('y', yLocation);
annotation.setAttribute('transform', rotate);
}
});
});
observer.observe(container, {
childList: true,
subtree: true
});
});
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
<div id="chart_div" style="width: 100%; height: 100%;"></div>
Related
I have an annoying problem. I'm creating a google line chart with an area-interval. As soon as I give the interval-columns the role: 'interval' the chart creates some sort of left and right boundary inside my linechart. How can I get rid of this?
This is my chart-code:
chartType: 'LineChart',
dataTable: {
cols: [
{type: 'date', label: 'datum'},
{type: 'number', label: 'activatie'},
{id: 'i0', type: 'number', p: {role: 'interval'}},
{id: 'i1', type: 'number', p: {role: 'interval'}}
],
rows: []
},
options: {
height: 70,
hAxis: {
gridlines: {
color: 'none'
},
format: 'd MMM',
ticks: [],
viewWindowMode: 'maximized'
},
vAxis: {
minValue: 0,
gridlines: {
color: 'none'
},
baseline: { color: 'none' },
textPosition: 'none'
},
chartArea: {
width: '100%',
height: 50,
bottom: 20,
left: 0,
right: 0,
backgroundColor: {
fill: blauw1,
fillOpacity: 0.05,
}
},
backgroundColor: { fill: 'none' },
legend: 'none',
intervals: {style: 'area', color: blauw5},
fontName: FONT_FAMILY,
tooltip: { trigger: 'none' },
pointsVisible: false,
colors: [blauw1],
areaOpacity: 0.0,
}
};```
This is how my chart look's like when the 2 interval-columns don't have the ```role: 'interval'``` added:
[without role: interval][1]
This is how my chart look's like when the 2 interval-columns have the ```role: 'interval'``` added:
[with role: interval][2]
[1]: https://i.stack.imgur.com/zpT3D.png
[2]: https://i.stack.imgur.com/0x3XG.png
instead of using option --> hAxis.viewWindowMode: 'maximized'
use a distinct view window using the min and max dates from the data...
hAxis.viewWindow: data.getColumnRange(0)
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable({
cols: [
{type: 'date', label: 'datum'},
{type: 'number', label: 'activatie'},
{id: 'i0', type: 'number', role: 'interval'},
{id: 'i1', type: 'number', role: 'interval'}
],
rows: [
{c:[{v: new Date(2020, 0, 27)}, {v: 10}, {v: 8}, {v: 12}]},
{c:[{v: new Date(2020, 0, 29)}, {v: 12}, {v: 10}, {v: 14}]},
{c:[{v: new Date(2020, 0, 31)}, {v: 14}, {v: 12}, {v: 16}]},
{c:[{v: new Date(2020, 1, 2)}, {v: 10}, {v: 8}, {v: 12}]}
]
});
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart',
dataTable: data,
options: {
height: 70,
hAxis: {
gridlines: {
color: 'none'
},
format: 'd MMM',
ticks: [],
viewWindow: data.getColumnRange(0)
},
vAxis: {
minValue: 0,
gridlines: {
color: 'none'
},
baseline: { color: 'none' },
textPosition: 'none'
},
chartArea: {
width: '100%',
height: 50,
bottom: 20,
left: 0,
right: 0,
backgroundColor: {
fill: 'cyan',
fillOpacity: 0.05,
}
},
backgroundColor: { fill: 'none' },
legend: 'none',
intervals: {style: 'area', color: 'blue'},
//fontName: FONT_FAMILY,
tooltip: { trigger: 'none' },
pointsVisible: false,
//colors: [blauw1],
areaOpacity: 0.0,
}
});
chart.draw();
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
I have a stacked bar chart where I need to annotate the bars with $ symbol as the profit and costs are currency.
I am successful in annotating of the bars without currency symbol but I am unable to display with the $ prefixed. Could anyone throw light on this
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {
packages: ["corechart"]
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var bar_chart_data = [
["Material", "Cost", "Profit", { role: 'style' },{ role: 'style' }],
["A", 100, 25, 'color: #F9F528','color: #0ACB53'],
["B", 4.2, 1.764, 'color: #F9F528','color: #0ACB53'],
["C", 110, 46.199999999999996, 'color: #F9F528','color: #0ACB53'],
["D", 7.56, 3.1752, 'color: #F9F528','color: #0ACB53'],
["E", 4.24, 1.7808, 'color: #F9F528','color: #0ACB53'],
["F", 0.8, 0.336, 'color: #F9F528','color: #0ACB53'],
["G", 2, 0.84, 'color: #F9F528','color: #0ACB53'],
["H", 0.8, 0.336, 'color: #F9F528','color: #0ACB53'],
]
var data = google.visualization.arrayToDataTable(bar_chart_data);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
}, 3, // <-- include style column
2, {
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}, 4 // <-- include style column
]);
var options = {
title: "Live individual material cost break-up (%)",
width: 600,
height: 400,
bar: {
groupWidth: "95%"
},
legend: {
position: "none"
},
isStacked: 'percent',
hAxis: {
title: 'Percentage',
textStyle: {
fontSize: 8,
fontName: 'Muli',
bold: false,
},
titleTextStyle: {
fontSize: 12,
fontName: 'Muli',
bold: true,
}
},
vAxis: {
title: 'Material',
textStyle: {
fontSize: 10,
bold: false
},
titleTextStyle: {
fontSize: 12,
bold: true
}
},
};
var chart = new google.visualization.BarChart(document.getElementById("material_bar_chart"));
chart.draw(view, options);
}
</script>
</head>
<body>
<div id="material_bar_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
use google's NumberFormat class
you can create a pattern, and format each data column.
var formatCurr = new google.visualization.NumberFormat({pattern: '$#,##0'});
formatCurr.format(data, 1);
formatCurr.format(data, 2);
see following working snippet...
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {
packages: ["corechart"]
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var bar_chart_data = [
["Material", "Cost", "Profit", { role: 'style' },{ role: 'style' }],
["A", 100, 25, 'color: #F9F528','color: #0ACB53'],
["B", 4.2, 1.764, 'color: #F9F528','color: #0ACB53'],
["C", 110, 46.199999999999996, 'color: #F9F528','color: #0ACB53'],
["D", 7.56, 3.1752, 'color: #F9F528','color: #0ACB53'],
["E", 4.24, 1.7808, 'color: #F9F528','color: #0ACB53'],
["F", 0.8, 0.336, 'color: #F9F528','color: #0ACB53'],
["G", 2, 0.84, 'color: #F9F528','color: #0ACB53'],
["H", 0.8, 0.336, 'color: #F9F528','color: #0ACB53'],
]
var data = google.visualization.arrayToDataTable(bar_chart_data);
var formatCurr = new google.visualization.NumberFormat({pattern: '$#,##0'});
formatCurr.format(data, 1);
formatCurr.format(data, 2);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
}, 3, // <-- include style column
2, {
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}, 4 // <-- include style column
]);
var options = {
title: "Live individual material cost break-up (%)",
width: 600,
height: 400,
bar: {
groupWidth: "95%"
},
legend: {
position: "none"
},
isStacked: 'percent',
hAxis: {
title: 'Percentage',
textStyle: {
fontSize: 8,
fontName: 'Muli',
bold: false,
},
titleTextStyle: {
fontSize: 12,
fontName: 'Muli',
bold: true,
}
},
vAxis: {
title: 'Material',
textStyle: {
fontSize: 10,
bold: false
},
titleTextStyle: {
fontSize: 12,
bold: true
}
},
};
var chart = new google.visualization.BarChart(document.getElementById("material_bar_chart"));
chart.draw(view, options);
}
</script>
</head>
<body>
<div id="material_bar_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
See image hAxis labels:
The hAxis labels are wrapping onto two lines, their values are, for example, 10.09 with no spaces. But on narrower screens its wrapping onto two lines, this is in Firefox.
In Chrome it works much better. This is how it looks in Chrome:
var options = {
height: 314,
areaOpacity: 0.18,
enableInteractivity: false,
isStacked: true,
hAxis: {
textStyle: {
color: '#919fa9',
fontName: 'Proxima Nova',
fontSize: 11,
italic: false
}
},
vAxis: {
slantedText: true,
minValue: 0,
textPosition: 'out',
title: 'Revenue',
titleTextStyle: {
fontSize: 14
},
textStyle: {
color: '#919fa9',
fontName: 'Proxima Nova',
fontSize: 11,
italic: false
},
baselineColor: '#eff1f2',
gridlines: {
color: '#eff1f2',
count: 15
}
},
lineWidth: 2,
colors: ['#00a8ff'],
curveType: 'function',
pointSize: 5,
pointShapeType: 'circle',
pointFillColor: '#008ffb',
backgroundColor: {
fill: '#ffffff',
strokeWidth: 0,
},
chartArea: {
left: 60,
top: 10,
width: '100%',
height: 260
},
fontSize: 11,
fontName: 'Proxima Nova',
tooltip: {
trigger: 'selection',
isHtml: true
},
seriesType: 'bars',
series: {
0: { color: '#2db56e' },
1: { color: '#cc0000' },
2: {
type: 'line',
color: '#00a8ff',
pointSize: 4,
pointShapeType: 'circle'
}
}
};
How can I improve the appearance of the Firefox version? Because at present its very hard to read
try setting the following option to 1 --> hAxis.maxTextLines
hAxis: {
maxTextLines: 1,
...
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['date', 'revenue'],
['10.01', 20],
['10.02', 30],
['10.03', 40],
['10.04', 50],
['10.05', 60],
['10.06', 70],
['10.07', 80],
['10.08', 90],
['10.09', 100],
['10.10', 120],
['10.11', 130],
['10.12', 150],
['10.13', 200],
['10.14', 220],
['10.15', 230],
['10.16', 240],
['10.17', 250],
['10.18', 260],
['10.19', 270],
['10.20', 280],
['10.21', 280],
['10.22', 290],
['10.23', 320],
['10.24', 340],
['10.25', 350],
['10.26', 360],
['10.27', 370],
['10.28', 380],
['10.29', 390],
['10.30', 400],
['10.31', 420]
]);
var options = {
height: 314,
areaOpacity: 0.18,
enableInteractivity: false,
isStacked: true,
hAxis: {
maxTextLines: 1,
textStyle: {
color: '#919fa9',
fontName: 'Proxima Nova',
fontSize: 11,
italic: false
}
},
vAxis: {
slantedText: true,
minValue: 0,
textPosition: 'out',
title: 'Revenue',
titleTextStyle: {
fontSize: 14
},
textStyle: {
color: '#919fa9',
fontName: 'Proxima Nova',
fontSize: 11,
italic: false
},
baselineColor: '#eff1f2',
gridlines: {
color: '#eff1f2',
count: 15
}
},
lineWidth: 2,
colors: ['#00a8ff'],
curveType: 'function',
pointSize: 5,
pointShapeType: 'circle',
pointFillColor: '#008ffb',
backgroundColor: {
fill: '#ffffff',
strokeWidth: 0,
},
chartArea: {
left: 60,
top: 10,
width: '100%',
height: 260
},
fontSize: 11,
fontName: 'Proxima Nova',
tooltip: {
trigger: 'selection',
isHtml: true
},
seriesType: 'bars',
series: {
0: { color: '#2db56e' },
1: { color: '#cc0000' },
2: {
type: 'line',
color: '#00a8ff',
pointSize: 4,
pointShapeType: 'circle'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am currently facing an issue with Google charts which looks fairly simply. All I need is to remove the stroke-width of the current chart:
And make it look like the chart below:
What I have is a stacked area chart, so the options were set as follows:
var options = {
'title': '',
isStacked: true,
legend: {
textStyle: { fontSize: '16' },
position: 'top'
},
hAxis: {
title: '',
gridlines: {
color: '#000000', //Note: 'count: 4' attribute is only possible for continuous...so try to find a way for non-continuous h axis
},
textStyle: {
fontName: 'Arial',
fontSize: '18'
}
//ticks: [0, 100, 200, 75, 100] // display labels every 25
},
vAxis: {
title: '',
gridlines: {
color: '#D3D3D3',
count: 10,
//lineDashStyle: [2,2]
},
textStyle: {
fontName: 'Arial',
fontSize: '18'
},
viewWindow: { max: range_max, min: range_min } //TODO: make them generable
//showTextEvery: 100
},
'width': 1100, //100% //TODO: make this relative
'height': 600,
crosshair:
{
trigger: 'both'
},
series:
{
0: { pointSize: 8 },
3: { lineDashStyle: [5, 1, 3] },
4: { type: 'area', color: 'transparent'}, //visibleInLegend: false
5: { type: 'area', backgroundColor: { strokeWidth: 0 } } // color: 'transparent'
},
intervals: { 'style': 'line' },
colors: ['#ff0000', '#000000', '#0000ff', '#000000', '#000000', '#000000']
}
But the strokeWidth property doesn't seem to be working. Any suggestions on what I am doing wrong please?
using a style column, you customize each series individually
it works the same for all the Column Roles, (annotation, style, etc...)
the role is applied to which ever series column it follows
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', {type: 'string', role: 'style'}, 'Line 1', 'Line 2'],
// add same style for each point, series 1 only
['2013', 1000, 400, 'stroke-width: 0;', 200, 400],
['2014', 1170, 460, 'stroke-width: 0;', 200, 400],
['2015', 660, 1120, 'stroke-width: 0;', 200, 400],
['2016', 1030, 540, 'stroke-width: 0;', 200, 400]
]);
var options = {
isStacked: true,
title: 'Company Performance',
hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 },
series:
{
0: { id: 'ss223', type: 'area', color: 'transparent' },
1: { type: 'area', color: 'black' },
2: { type: 'line', color: 'red' },
3: { type: 'line', color: 'blue' }
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
problem with the above example, the legend is now out of sync with the series style
use the chart's 'ready' event to correct the legend entry,
the black line will be a path element
depending on the styles used, the logic may need to be adjusted, but works here
the elements found in the container will be in the same order as the data
see following working snippet to correct legend entry...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', {type: 'string', role: 'style'}, 'Line 1', 'Line 2'],
// add same style for each point, series 1 only
['2013', 1000, 400, 'stroke-width: 0;', 200, 400],
['2014', 1170, 460, 'stroke-width: 0;', 200, 400],
['2015', 660, 1120, 'stroke-width: 0;', 200, 400],
['2016', 1030, 540, 'stroke-width: 0;', 200, 400]
]);
var options = {
isStacked: true,
title: 'Company Performance',
hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 },
series:
{
0: { id: 'ss223', type: 'area', color: 'transparent' },
1: { type: 'area', color: 'black' },
2: { type: 'line', color: 'red' },
3: { type: 'line', color: 'blue' }
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
Array.prototype.forEach.call(container.getElementsByTagName('path'), function(path) {
if (path.getAttribute('stroke') === '#000000') {
path.setAttribute('stroke', 'transparent');
}
});
});
chart.draw(data, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I use combo google chart to display my data and goals on the graph like this:
I want to display goal lines on a full width of the graph, like this:
Here is what I've tried but with no luck:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Month', 'RUH %', 'SJA %', 'Goal 30', 'Goal 60'],
['GKP', 16, 93, 30, 60],
['HKP', 13, 11, 30, 60],
['SKP', 15, 11, 30, 60],
['AEV', 19, 80, 30, 60],
['AE', 63, 69, 30, 60]
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'RUH og SJA måloppnåelse',
width: 600,
height: 400,
chartArea: {'width': '90%', 'height': '80%'},
colors: ["blue", "green"],
legend: { position: 'bottom' },
vAxis: {title: ""},
hAxis: {title: ""},
seriesType: "bars",
series: {2: {type: "line", visibleInLegend: false, color: "red"}, 3:{type: "line", visibleInLegend: false, color: "red"}}
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
How can I achieve this?
To extend the lines to the edge of the chart, you have to use a continuous type axis, and extend your data set by one row before and after your existing data. You can use a DataView to convert your string labels to formatted numbers, and then use the hAxis.ticks option to set the axis labels:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Month', 'RUH %', 'SJA %', 'Goal 30', 'Goal 60'],
['', null, null, 30, 60],
['GKP', 16, 93, 30, 60],
['HKP', 13, 11, 30, 60],
['SKP', 15, 11, 30, 60],
['AEV', 19, 80, 30, 60],
['AE', 63, 69, 30, 60],
['', null, null, 30, 60]
]);
var ticks = [];
// ignore the first and last rows
for (var i = 1; i < data.getNumberOfRows() - 1; i++) {
ticks.push({v: i, f: data.getValue(i, 0)});
}
var view = new google.visualization.DataView(data);
view.setColumns([{
type: 'number',
label: data.getColumnLabel(0),
calc: function (dt, row) {
return {v: row, f: dt.getValue(row, 0)};
}
}, 1, 2, 3, 4]);
var range = view.getColumnRange(0);
var offset = 0.5; // change this value to adjust the padding to the left and right of the columns in the chart
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(view, {
title : 'RUH og SJA måloppnåelse',
width: 600,
height: 400,
chartArea: {
width: '90%',
height: '80%'
},
colors: ["blue", "green"],
legend: {
position: 'bottom'
},
vAxis: {
title: ""
},
hAxis: {
title: "",
ticks: ticks,
viewWindow: {
min: range.min + offset,
max: range.max - offset
},
gridlines: {
// hide vertical gridlines to match discrete chart display
color: 'transparent'
}
},
seriesType: "bars",
series: {
2: {
type: "line",
visibleInLegend: false,
color: "red"
},
3:{
type: "line",
visibleInLegend: false,
color: "red"
}
}
});
}
see working example here: http://jsfiddle.net/asgallant/J2u3n/