score:2
Accepted answer
You can define the Highchart configuration object once and use it multiple times, like this:
$(document).ready(function () {
// Using classes to select multiple containers
var $containers = $(".container");
// You just set the configuration object once
var chartConfig = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Unused',
y: 40,
color: '#eeeeee',
sliced: true,
selected: true
}, {
name: 'Used',
y: 60,
color: '#ff7900',
selected: true
}]
}]
};
// And then for every container init Hightchart with the same object
$containers.each(function() {
$(this).highcharts(chartConfig);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id="container1" class="container">pie1</div>
<div id="container2" class="container">pie2</div>
Source: stackoverflow.com
Related Query
- how to display 2 same highcharts without duplicate the code
- How do you get a colorByPoint appearance in Highcharts without coloring all the bars in a group the same color?
- How to display the value instead of percentage in a pie chart using jquery Highcharts
- Highcharts - How to display legend symbol inside the tooltip
- How do I remove the color swatch from my HighCharts legend without affecting the column?
- How can i keep the color the same in highcharts
- How Can I Hide a Pie Chart's Slice in HighCharts Without Removing It From the Legend?
- How to merge two Highcharts container with the same legend-item
- How to re-create the same chart in Highcharts as seen on the mock?
- How can I display the outcome of the for loop in highcharts
- Highcharts how to align two charts yAxis on the same line
- How to make the Y Axis values not start from 0 in highcharts? How to display forcefully display the last category data on X axis in HighCharts ?
- How can I display crosshair labels on top of the chart with Highcharts
- How can I capture all points belonging to the same series with the same xAxis value without a loop?
- How do I catch a click event on a polygon in HighCharts without having the tooltip popping up
- What's the code in Highcharts such that the bars (columns) in the same group use the same color?
- How to make hover effect for two bar in highcharts at the same time is there any way by using css or any inbuilt method to achieve this?
- highcharts how to make x and y axis starting on the same zero using categories on yAxis
- same js highcharts display not the same
- How to use a different formatter on Highcharts in each curve of the same graphic?
- How to remove default Hover text and display the custom text title on hover Donut chart Highcharts
- How to have multiple highcharts with different series data in vuejs without repeating code
- How to disable the circle that appears in Highcharts without data?
- How to position the dataLabel for highcharts on the same side of the x-axis?
- Highcharts Chart Bar - How can I display in the chart, only one column from my HTML table?
- How to render x-axis labels in Highcharts without the decimal points?
- How do I skip a datapoint in Highcharts without causing an interruption in the line of the chart?
- How to display multiple values of the same attribute when hovering on tooltip with highcharts/highmaps
- How do I have text display within the inside of a stacked bar graph in highcharts
- How to use highcharts to display data of only five point when the page is initialized?
More Query from same tag
- what means ${demo.css} in example files of highcharts ? That piece of code seems to be literal
- Sync ticks on multiple independent axis
- Highcharts Stock Chart, Series Padding?
- How do I show multiple datapoints in HighMaps?
- how to implement multiple point data selection in highcharts?
- How to make highchart span over whole x-axis?
- How can you add flags to points on a graph
- Dynamic Highstock chart when no data at start
- Creating a Pie (highcharts) using a defined HTML table
- In Highcharts, any way we can get the plotWidth and plotHeight before rendering the chart?
- How can I set the height of a highchart dynamically without setting the width?
- Highcharts Grouped Column with Time Series
- highcharts y-axis title wrap
- Highcharts with datetime and also additional data (tooltip text)
- HighCharts ios Disable Initial Animation
- How to curve every data labels along the individual segments in Sunburst chart?
- Changing value of variable in Highcharts selection event in angular
- Can you remove specific grid lines and point labels using highcharts without css?
- DotNet.Highcharts and proper JSON
- How to set background image on 3d highcharts?
- How to loop through highcharts theme
- How to attach click event function in Highcharts
- JSON to javascript Date.UTC
- SQL time stamp to millisecond
- highchart drill down break bar chart after change title
- How do I implement solid colours for zone boundaries in Highcharts?
- Making Highcharts scatter circle shadow
- HighMap chart with lat long data
- Get corresponding y-axis value for x-axis in HighCharts
- Change color in specific columns w/ multiple series