How do I customize grid lines in Smart Chart using JavaScript?

[natejacobson]

Hi everyone, I am working on a SaaS settings panel with Charts. I am currently trying to solve this: How do I customize grid lines in Smart Chart using JavaScript? So far, I tested with both static data and API data, but state gets out of sync after user interactions. Has anyone solved this in production?

[admin]

Hi,

To customize the grid lines in the Smart UI Chart, you need to configure axis-related options within the seriesGroups property. While the context provided does not show direct axis or grid line properties, Smart UI Chart typically allows grid line customization via axis options (such as valueAxis, xAxis, or similar, which may include properties for grid line color, width, and style).

What is missing?
The relevant properties for grid line customization (for example, grid line color, width, or dash style) are not explicitly listed in the provided context. You should inspect the seriesGroups object, particularly its axis options like valueAxis and xAxis for members such as:

gridLinesColor
gridLinesWidth
gridLinesDashStyle
These are likely where grid line appearance can be customized.

Example setup (Pseudocode):

<smart-chart
  id="chart"
  [dataSource]="data"
  [seriesGroups]="seriesGroups"
></smart-chart>

// In your script:
const seriesGroups = [
  {
    type: 'line',
    valueAxis: {
      gridLinesColor: '#cccccc',
      gridLinesWidth: 1,
      gridLinesDashStyle: '4,4' // dashed grid lines
    },
    series: [
      { dataField: 'value', displayText: 'Example Series' }
    ]
  }
];

To customize grid lines, look for grid line properties inside the corresponding axis object within seriesGroups. If you need specific member names, review the seriesGroups documentation for axis customization options.

regards,
Markov

[Author]

Posts