PP.Ui.ChartGrid (settings);
settings. JSON object that contains values of class properties.
The ChartGrid constructor creates an instance of the ChartGrid class.
To execute this example, the HTML page must contain the BubbleChart component named bubbleChart (see Example of Creating the BubbleChart Component). Render a new coordinate grid in the bubble chart:
// Delete the old bubble chart coordinate grid
bubbleChart.getChartArea().getGrid().dispose();
// Create a new coordinate grid
var grid = new PP.Ui.ChartGrid({
// Set smooth fading of lines on changing coordinate zoom
SmoothDisappear: true,
Chart: bubbleChart,
// Set coordinate grid border style
BorderBrush: new PP.SolidColorBrush({
Color: PP.Color.Colors.darkgrey, // Dark grey color
Enabled: true,
Opacity: 1 // Opaque border
}),
BorderThickness: 2, // Border width
// Display all borders
Bottom: true,
Left: true,
Right: true,
Top: true,
// Determine horizontal and vertical bubble chart gridlines
Horizontals: PP.Ui.ChartArea.DEFAULT_HORIZONTALS,
Verticals: new PP.Ui.ChartGridLineCollection({
// Collection of main vertical lines
Chart: bubbleChart,
LineType: "solid", // Solid line type
IntervalsCount: "5", // Number of intervals created by lines
Stroke: PP.Color.Colors.lightgray, // Light grey color
SubLines: {
// Collection of additional vertical lines
LineType: "dash", // Dash line
IntervalsCount: "2",
Stroke: PP.Color.Colors.white,
Thickness: "1",
},
Thickness: "2" // Line width
})
});
// Render a coordinate grid in bubble chart
grid.draw(bubbleChart.getChartArea().getPaperArea());
// Add borders to coordinate grid
grid.toFront();
After executing the example a new coordinate grid with dark gray opaque borders is rendered in the bubble chart.
Horizontal grid lines have default settings.
Major vertical lines have the following settings: light gray color, solid type, width equal to 2 pixels, and the number of intervals formed by the lines, is set to 5. Minor vertical lines have the following settings: two intervals, white fill color, dashed line type, and width equal to one pixel:
See also: