Formatting charts & markers

Question

I&#8217;m new to canvasjs and have been working with scatter plots for a couple weeks now. I&#8217;m using customization for charts and datapoints and not sure which customization I&#8217;m using that&#8217;s causing the charts to look different.
These two charts have the same customization (chart height, width and data point marker size, and interval) but the format changes when the number of data points change. Most notably, with the fewer data points, the markers don&#8217;t start on the x axis &#8211; they start plotting a bit above the axis. Also note the space between each marker that exists with low number of data points that does not exist when the numbers get larger. Finally, the top data point is much taller than the other data points.

shashiranjan · Answer

@chiteach,

Can you kindly create a JSFiddle with sample data, so that we can understand the use case better and help you out?

--
Shashi Ranjan
Team CanvasJS

chiteach · Answer

Here are my current customizations:
backgroundColor: “#99FAFB”,
width: 350,
height: 600,
dataPointWidth: 40,
title: {
text: “NWEA Summer Learning Loss: Math”
},
axisX: {
title: “Current Grade Level”,
interval: 1
},
axisY: {
title: “# of Students”,
suffix: “”
},
legend: {
cursor: “pointer”,
itemclick: toggleDataSeries
},
dataPointMinWidth: 40,
data: [{
type: “scatter”,
name: “75-99%”,
showInLegend: true,
markerType: “square”,
markerBorderThickness: 1,
markerBorderColor: “black”,
markerColor: “black”,
markerSize: 40,

and
<body><div id=”RedchartContainer” style=”height: 600px; max-width: 920px; margin: 0px auto;”></div>

Front End Technology Samples

Server Side Technology Samples

FORUMS

Login to Ask a Question or Reply

Formatting charts & markers