How to show multiple HighCharts charts in the same page? - html

Question

I'm building Asp.net MVC website, and I'm trying to show multiple charts on the same page, but when I add second chart it covers the first one, so they never appear below each other, and they seem to be stacked over each other instead.
I tried adding table and add each chart to a table row but this didn't work also, not sure what I'm missing.
#(Html.Highsoft().Highcharts(
new Highcharts
{
Chart = new Highsoft.Web.Mvc.Charts.Chart
{
Type = ChartType.Line
},
Title = new Title
{
Text = ""
},
XAxis = new List<XAxis>
{
new XAxis
{
Type = XAxisType.Datetime,
Categories = ViewData["xValues"] as List<string>,
//Type = XAxisType.Datetime,
//TickInterval = 7 * 24 * 3600 * 1000, // one week
//TickWidth = 0,
//GridLineWidth = 1,
Labels = new XAxisLabels
{
Align = XAxisLabelsAlign.Left,
X = 3,
Y = 40
},
Crosshair = new XAxisCrosshair
{
Width = 2
}
}
},
YAxis = new List<YAxis>
{
new YAxis
{
Labels = new YAxisLabels
{
Align = YAxisLabelsAlign.Left,
X = 3,
Y = 16,
Format = "{value:.,0f}"
},
ShowFirstLabel = false
},
},
Legend = new Legend
{
Align = LegendAlign.Left,
VerticalAlign = LegendVerticalAlign.Top,
Y = 20,
Floating = true,
BorderWidth = 0
},
PlotOptions = new PlotOptions
{
Series = new PlotOptionsSeries
{
Cursor = PlotOptionsSeriesCursor.Pointer,
Events = new PlotOptionsSeriesEvents
{
Click = "handleClick"
},
Marker = new PlotOptionsSeriesMarker
{
LineWidth = 1
}
}
},
Series = new List<Series>
{
new LineSeries
{
Name = "Error Page Count",
Data = #ViewData["Count"] as List<LineSeriesData>
},
new LineSeries
{
Color = "blue",
Name = "Error Page Rate",
Data = #ViewData["Values"] as List<LineSeriesData>
},
new LineSeries
{
Color = "black",
Name = "Error Page Rate (Users)",
Data = #ViewData["Rate"] as List<LineSeriesData>
}
}
}
, "chart"))
<script type="text/javascript">
function formatToolTip() {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
#(Html.Highsoft().Highcharts(
new Highcharts
{
Title = new Title
{
Text = "Stacked bar chart"
},
XAxis = new List<XAxis>
{
new XAxis
{
Categories = new List<string> { "Apples", "Oranges", "Pears", "Grapes", "Bananas" }
}
},
YAxis = new List<YAxis>
{
new YAxis
{
Min = 0,
Title = new YAxisTitle
{
Text = "Total fruit consumption"
},
StackLabels = new YAxisStackLabels
{
Enabled = true,
Style = new Hashtable
{
{ "fontWeght", "bold" }
}
}
}
},
//Legend = new Legend
//{
// Align = LegendAlign.Right,
// X = -30,
// VerticalAlign = LegendVerticalAlign.Top,
// Y = 25,
// Floating = true,
// BorderColor = "#CCC",
// BorderWidth = 1,
// BackgroundColor = "white"
//},
Tooltip = new Tooltip
{
Formatter = "formatToolTip"
},
PlotOptions = new PlotOptions
{
Column = new PlotOptionsColumn
{
Stacking = PlotOptionsColumnStacking.Normal,
DataLabels = new PlotOptionsColumnDataLabels
{
Enabled = true,
Color = "#FFFFFF",
Shadow = new Shadow()
{
Enabled = true,
Color = "black",
Width = 10,
OffsetX = 0,
OffsetY = 0
}
}
}
},
Series = new List<Series>
{
new ColumnSeries
{
Name = "John",
Data = #ViewData["johnData"] as List<ColumnSeriesData>
},
new ColumnSeries
{
Name = "Jane",
Data = #ViewData["janeData"] as List<ColumnSeriesData>
},
new ColumnSeries
{
Name = "Joe",
Data = #ViewData["joeData"] as List<ColumnSeriesData>
}
}
}
, "chart")
)

Answer 1

I found the problem.
I was using the same chart id for both charts, when I renamed one of the charts both appeared with no problem.