चित्रात्मक बार चार्ट: कस्टम आकृतियाँ और वेक्टर ग्राफिकल बार

विकल्प = {
  शीर्षक: {
    पाठ: "किसान बाजार की फसल",
    बाएं: 'केंद्र'
  },
  संकेतक: {
    डेटा: ['ग्रीष्म', 'गर्मी'],
    ऊपर: '8%'
  },
  सुझाव: {
    उद्दीपन: 'अक्ष',
    अक्ष संकेतक: {
      प्रकार: 'छाया'
    }
  },
  ग्रिड: {
    लेबल समावेश: सच, 
    ऊपर: '18%',
    बाएं: 20
  },
  yअक्ष: {
    डेटा: ['सेब', 'संतरे', 'केले', 'अंगूर', 'स्ट्रॉबेरी'],
    उल्टा: सच,
    अक्ष रेखा: { दिखाएं: गलत },
    अक्ष टिक: { दिखाएं: गलत },
    अक्ष लेबल: {
      मार्जिन: 30,
      फॉन्ट आकार: 14
    }
  },
  xअक्ष: {
    विभाजन रेखा: { दिखाएं: गलत },
    अक्ष लेबल: { दिखाएं: गलत },
    अक्ष टिक: { दिखाएं: गलत },
    अक्ष रेखा: { दिखाएं: गलत }
  },
  श्रेणी: [
    {
      नाम: 'ग्रीष्म',
      प्रकार: 'चित्रात्मकबार',
      प्रतीक दोहराएं: सच,
      प्रतीक आकार: ['80%', '60%'],
      बार श्रेणी अंतराल: '40%',
      डेटा: [
        { मूल्य: 320, प्रतीक: 'वृत्त' },
        { मूल्य: 180, प्रतीक: 'आयत' },
        { मूल्य: 410, प्रतीक: 'हीरा' },
        { मूल्य: 95, प्रतीक: 'त्रिभुज' },
        { मूल्य: 240, प्रतीक: 'गोल आयत' }
      ]
    },
    {
      नाम: 'गर्मी',
      प्रकार: 'चित्रात्मकबार',
      बार अंतराल: '10%',
      प्रतीक दोहराएं: सच,
      प्रतीक आकार: ['80%', '60%'],
      डेटा: [
        { मूल्य: 290, प्रतीक: 'वृत्त' },
        { मूल्य: 210, प्रतीक: 'आयत' },
        { मूल्य: 520, प्रतीक: 'हीरा' },
        { मूल्य: 130, प्रतीक: 'त्रिभुज' },
        { मूल्य: 310, प्रतीक: 'गोल आयत' }
      ]
    }
  ]
};

विकल्प = {
    सुझाव: {
        ट्रिगर: 'अक्ष'
    },
    x-अक्ष: {
        प्रकार: 'मान',
        अधिकतम: 10,
        विभाजन रेखा: { दिखाएं: गलत }
    },
    y-अक्ष: {
        प्रकार: 'श्रेणी',
        डेटा: ['टीम अल्फा', 'टीम बीटा', 'टीम गामा'],
        अक्ष रेखा: { दिखाएं: गलत },
        अक्ष टिक: { दिखाएं: गलत }
    },
    श्रृंखला: [
        {
            प्रकार: 'चित्रात्मक बार',
            प्रतीक: 'गोल आयत',
            प्रतीक दोहराएं: सत्य,
            प्रतीक आकार: [12, 30],
            प्रतीक मार्जिन: 4,
            डेटा: [8, 5, 9],
            आइटम शैली: {
                रंग: '#91cc75'
            }
        }
    ]
};

const pathBattery = 'path://M16 4h-2V2a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v2H8a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z';

विकल्प = {
    शीर्षक: {
        पाठ: 'डिवाइस बैटरी स्तर',
        बाएं: 'केंद्र'
    },
    सुझाव: {
        ट्रिगर: 'अक्ष',
        अक्ष संकेतक: { प्रकार: 'कोई नहीं' }
    },
    ग्रिड: {
        ऊपर: '20%',
        नीचे: '15%',
        बाएं: '10%',
        दाएं: '10%'
    },
    x-अक्ष: {
        प्रकार: 'श्रेणी',
        डेटा: ['नोड A', 'नोड B', 'नोड C', 'नोड D'],
        अक्ष रेखा: { दिखाएं: गलत },
        अक्ष टिक: { दिखाएं: गलत }
    },
    y-अक्ष: {
        प्रकार: 'मान',
        अधिकतम: 100,
        दिखाएं: गलत
    },
    श्रृंखला: [
        {
            नाम: 'बैटरी शेल',
            प्रकार: 'चित्रात्मक बार',
            प्रतीक: pathBattery,
            प्रतीक आकार: ['60%', '100%'],
            प्रतीक स्थिति: 'शुरुआत',
            प्रतीक सीमा डेटा: 100,
            प्रतीक काटना: गलत,
            आइटम शैली: {
                रंग: '#e2e8f0' // खाली बैकग्राउंड शेल
            },
            डेटा: [100, 100, 100, 100],
            z: 1
        },
        {
            नाम: 'चार्ज स्तर',
            प्रकार: 'चित्रात्मक बार',
            प्रतीक: pathBattery,
            प्रतीक आकार: ['60%', '100%'],
            प्रतीक स्थिति: 'शुरुआत',
            प्रतीक सीमा डेटा: 100,
            प्रतीक काटना: सत्य, // मान के अनुपात में भरता है
            लेबल: {
                दिखाएं: सत्य,
                स्थिति: 'ऊपर',
                प्रारूपक: '{c}%',
                फ़ॉन्ट आकार: 14,
                वजन: 'मोटा',
                रंग: '#333'
            },
            आइटम शैली: {
                रंग: '#22c55e' // सक्रिय चार्ज हरा भराव
            },
            डेटा: [85, 45, 92, 20],
            z: 2
        }
    ]
};