score:24
If you're trying to get two charts on one page then it is VERY simple.
<div id="chart-A" class="chart"></div>
<div class="spacer"></div>
<div id="chart-B" class="chart"></div>
CSS - Just to make the example a little easier on the eyes
.chart {
height: 200px;
}
.spacer {
height: 20px;
}
JavaScript
$(function() {
// If you need to specify any global settings such as colors or other settings you can do that here
// Build Chart A
$('#chart-A').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Chart A'
},
xAxis: {
categories: ['Jane', 'John', 'Joe', 'Jack', 'jim']
},
yAxis: {
min: 0,
title: {
text: 'Apple Consumption'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
shared: true
},
series: [{
name: 'Apples',
data: [5, 3, 8, 2, 4]
}]
});
// Build Chart B
$('#chart-B').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Chart B'
},
xAxis: {
categories: ['Jane', 'John', 'Joe', 'Jack', 'jim']
},
yAxis: {
min: 0,
title: {
text: 'Miles during Run'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
shared: true
},
series: [{
name: 'Miles',
data: [2.4, 3.8, 6.1, 5.3, 4.1]
}]
});
});
Here's a JSFiddle: http://jsfiddle.net/engemasa/7cvCX/
score:4
I am not really sure what some of your code is trying to do - seems a little needlessly complicated, FWIW
AS to how to make multiple charts on the same page - you do it just like you would make one chart on a page, just do it more than once :)
and make sure you have different container element ids - otherwise you are just overwriting one chart with the next.
One example of multiple charts on a page:
there's no relevant code to put here, just click the link
Source: stackoverflow.com
Related Query
- how do I get two highcharts on one page?
- How can I update two highcharts with one dropdown menu?
- How to show multiple Highcharts graph on one page
- Highcharts - how to display multiple graphs on one page using multiple xml files
- how to enable only 1 out of 2 column column graph by default when page loads in highcharts and the 2nd one gets visible when toggled in the legend
- How to get 2 data-points with one name in series Line Graph Highcharts Reactjs
- how to display two charts on one page using angular2
- How to get highcharts dates in the x axis?
- How can I get access to a Highcharts chart through a DOM-Container?
- How to get Highcharts X-Axis Categories starting at the left most point
- Hiding _groups_ of series in Highcharts and jQuery: how to get acceptable performance?
- HighCharts - two Y-axis, one with max value
- How to export the whole page or html content with Highcharts not just the chart?
- How to get rangeSelector to work with HighCharts
- How to get series's id in Highcharts / Highstock
- How do I get the value of a highcharts graph point on mouseover?
- How to get an image watermark in HighCharts charts?
- How to get multiple data series into Highcharts
- Highcharts - How to get a value of a stack in a series?
- how to get chart object inside a point event function in Highcharts
- How can I include two data in one series on HIGHCHARTS?
- how to get svg of highcharts using div id?
- How get data name in Highcharts pie chart legend instead of "Slice" using array of values?
- Highcharts How to get decimal point values on y-axis with big numbers
- How to hide one series data info in tooltip using highcharts
- Highcharts - How do I get dashed lines in legend
- How to get next point in Highcharts tooltip
- How to get the Div id of charts in highcharts on click of it in angular 6
- Multiple highcharts charts dynamically created in angular2 on one page
- Highcharts - How to get default y-Axis label formatter in a custom formatter
More Query from same tag
- Highcharts context menu hidden behind series
- How to work with Highcharts in AngularJS
- Highstock date input jquery ui datepicker position changes
- Use images in Highcharts as xAxis labels
- Highchart with dual y-axis with date
- Ruby on Rails, JSON and Highcharts
- Highcharts: overlay label on a graph
- Tree map- colorAxis Behaving Differently
- Highcharts failing to load intermittently via AJAX
- R Highcharter: On x-axis, Date is not showing correctly when dataframe has only one result
- Multiple different chart types stacked, column type with y value as color
- highcharts display tooltip on category label hover
- Highcharts - Funnel, Line and Scatter
- could not find function "hc_add_series_density" Highcharter R
- Highcharts - Column labels with different widths are not aligned
- HighCharts - hide date on x-axis and have only hours and minutes
- Dynamically populated highcharts data and database storing
- Highcharts datetime axis overlap with a long time series
- Highcharts Y axis needs to be on the X axis
- zip two arrays in javascript not working to draw high chart
- Setting color options on Highchart bar chart
- Highcharts - updating series leads to tooltip-related error (mouseOver)
- Highstock - How to add point if I have different data on main chart and navigator
- Server-side c# and client side javascript with json loading Highcharts gantt chart Task Progress Indicator, need to change Tooltip and Label name
- Highcharts bar grouping while maintaining transparent overlay?
- How to decrease sensitivity of automatic axis adjustment in Highcharts when dragging points
- How do I open a new window / tab by clicking on a column / bar within a Highchart graph?
- Javascript convert 2D array to array of pairs
- how to get additional information by clicking a data point on bubble chart from data
- ERROR TypeError:Cannot read property 'forEach' of undefined in Angular