I’m reviewing: Chart and got confused. Any help? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 1 reply, has 2 voices, and was last updated by admin 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

I’m reviewing: Chart and got confused. Any help? Posts

December 5, 2025 at 8:55 am I’m reviewing: Chart and got confused. Any help? #136410

pedro_barbosa

Participant

How can I customize jqxChart to display multiple series with different chart types on the same plot using jQuery?

December 10, 2025 at 12:23 pm I’m reviewing: Chart and got confused. Any help? #136411

admin

Keymaster

Hi,

You can do this:

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>jqxChart mixed types example</title>
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- jQWidgets scripts & styles (use the version you have; these are example CDN paths) -->
  <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" />
  <script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
  <style>
    #chartContainer { width: 800px; height: 450px; margin: 20px auto; }
  </style>
</head>
<body>
  <div id="chartContainer"></div>

  <script>
    $(function () {
      // sample data
      var sampleData = [
        { Month: 'Jan', Sales: 120, Expenses: 70, Profit: 50 },
        { Month: 'Feb', Sales: 150, Expenses: 80, Profit: 70 },
        { Month: 'Mar', Sales: 170, Expenses: 90, Profit: 80 },
        { Month: 'Apr', Sales: 140, Expenses: 60, Profit: 80 },
        { Month: 'May', Sales: 190, Expenses: 120, Profit: 70 },
        { Month: 'Jun', Sales: 210, Expenses: 130, Profit: 80 }
      ];

      // common chart settings
      var settings = {
        title: "Company metrics (mixed types)",
        description: "Columns for Sales/Expenses and a line for Profit",
        source: sampleData,
        categoryAxis: {
          dataField: 'Month',
          showGridLines: true
        },
        colorScheme: 'scheme01',
        legend: { visible: true, position: 'top' },
        padding: { left: 10, top: 5, right: 10, bottom: 5 },
        seriesGroups: [
          // 1) column group with two series
          {
            type: 'column',
            columnsGapPercent: 30,
            seriesGapPercent: 10,
            valueAxis: {
              visible: true,
              title: { text: 'Amount (EUR)' },
              // optional formatting
              formatSettings: { decimalPlaces: 0 }
            },
            series: [
              { dataField: 'Sales', displayText: 'Sales' },
              { dataField: 'Expenses', displayText: 'Expenses' }
            ]
          },
          // 2) line group for Profit (overlaid on same chart)
          {
            type: 'line',
            // You can set a different valueAxis here if you want a separate scale:
            // valueAxis: { visible: true, title: { text: 'Profit (EUR)' }, minValue: 0, maxValue: 250 },
            // If using same axis, omit or set formatting to match.
            series: [
              {
                dataField: 'Profit',
                displayText: 'Profit',
                // marker settings (optional)
                markerType: 'circle',
                lineWidth: 2
              }
            ]
          }
        ]
      };

      // initialize chart
      $('#chartContainer').jqxChart(settings);

      // example: refresh with new settings later (re-init)
      // $('#chartContainer').jqxChart(settings); // re-call with changed settings to update.
    });
  </script>
</body>
</html>

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.